How to execute selenium-webdriver / protractor commands interactively in chrome devtools command line?

Question

How to:

• write unfinished test

• set breakpoint at the end of unfinished test

• enter repl / command line / chrome devtools

• execute selenium commands in repl / command line / chrome devtools

Answer 1

Was able to setup development environment where I can execute selenium actions in chrome devtools (interactively)

1.write example test with debugger breakpoint in the middle

const faker = require('faker')

describe('login', function() {
  this.timeout(30 * 1000)

  describe("when user doesn't exist", () => {
    it.only('should not login', async () => {
      await browser.get(`/login`)

      // debugger breakpoints

      // I'm using `await $('div').getText();` command to force selenium evaluate promise.

      // More about how promises are evaluated in chrome devtools here
      // https://stackoverflow.com/questions/53852917/how-to-run-asynchronous-code-in-chrome-devtools-when-script-execution-is-paused

      // use F8 in chrome devtools to execute `await $('div').getText();` and stop on next `debugger` breakpoint
      // use ctrl-[ and ctrl-] to switch between panels in chrome devtools

      debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();debugger; await $('div').getText();

      await $('#gb-email').sendKeys('foo@mail.com')
    })
  })
})

2. run protractor in inspect mode

"test:debug": "node --inspect-brk=0.0.0.0:9229 ./node_modules/.bin/protractor ./config.js",

3. go to chrome://inspect/#devices and click inspect link to launch chrome devtools

4. press f8 to continue test and stop on first breakpoint

5. now you can execute selenium commands interactively in console

6. press f8 to continue execution (promises can't be evaluated when thread is paused), await $('div').getText(); will force selenium to execute statement (selenium promises are weird type of promises, for example even await(new Promise((resolve) => { setTimeout(() => { resolve('dummy'); }, 0); })) doesnt force selenium to execute statement`)

7. PROFIT

---

BONUS

config.js

exports.config = {
  framework: "mocha",
  baseUrl: process.env.APP_URL,
  seleniumAddress: process.env.HUB_URL,
  specs: ["src/specs/**/*.js"],
  capabilities: {
    browserName: "chrome",

    // https://stackoverflow.com/questions/32740900/webdriverio-selenium-pass-command-line-arguments-into-chrome-from-config-js-file
    chromeOptions: {
      args: [
        // disable chrome's wakiness
        'disable-infobars',
        'disable-extensions',

        // allow http
        'disable-web-security',

        // other
        'lang=en',
        'no-default-browser-check',
        'no-sandbox',

        // not working
        // 'start-maximized',
      ],
      prefs: {
        // disable chrome's annoying password manager
        'profile.password_manager_enabled': false,
        'credentials_enable_service': false,
        'password_manager_enabled': false,

        download: {
          default_directory:   process.env.REMOTE_DOWNLOAD_DIR,
          prompt_for_download: false,
          directory_upgrade:   true,
          extensions_to_open:  '',
        },
        plugins: {
          plugins_disabled: ['Chrome PDF Viewer'], // disable viewing pdf files after download
        },
      },
    },
  },
  onPrepare: function () {
    browser.ignoreSynchronization = true

    // because --start-maximized arg is not working
    browser.driver.manage().window().maximize()

    // patch require function to run babel before loading files
    require("@babel/register")

    // fix regeneratorRuntime is not defined
    // require("@babel/polyfill")
  },
  mochaOpts: {
    enableTimeouts: false,
    file: ['./src/hooks/index.js'],
  },
  allScriptsTimout: 15000,
}

N.B. duplicated here https://github.com/angular/protractor/issues/5099#issuecomment-450209485