如何在 chrome devtools 命令行中交互式执行 selenium-webdriver / protractor 命令？

Question

如何：

• 编写未完成的测试

• 在未完成的测试结束时设置断点

• 进入repl/命令行/chrome devtools

• 在repl/命令行/chrome devtools中执行selenium命令

Answer 1

能够设置开发环境，我可以在 chrome devtools 中执行 selenium 操作（交互式）

1.编写示例测试，中间有调试器断点

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')
    })
  })
})

1. 在检查模式下运行量角器

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

1. 转到 chrome://inspect/#devices 并单击检查链接以启动 chrome devtools

4. 按 f8 继续测试并在第一个断点处停止

5. 现在您可以在控制台中以交互方式执行 selenium 命令

6. 按 f8 继续执行（promises can't be evaluated when thread is paused），await $('div').getText(); 将强制 selenium 执行语句（selenium 承诺是一种奇怪的承诺，例如即使 await(new Promise((resolve) => { setTimeout(() => { resolve('dummy'); }, 0); })) 不强制 selenium 执行语句`）

7. 利润

---

奖金

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,
}

注意在这里重复https://github.com/angular/protractor/issues/5099#issuecomment-450209485