使用无头 Chrome 进行自动化测试

如果你想使用 Headless Chrome 运行自动化测试，那就别犹豫了！本文将指导您使用 Karma 作为跑步者，并使用 Mocha+Chai 编写测试。

这些东西是什么？

卡尔玛、摩卡、茶、无头 Chrome，天哪！

Karma 是一种测试框架，可与任何最受欢迎的测试框架（Jasmine、Mocha、QUnit）搭配使用。

Chai 是一个可与 Node 和浏览器搭配使用的断言库。我们需要后者。

无头 Chrome 是一种在没有完整浏览器界面的无头环境中运行 Chrome 浏览器的方法。使用无头 Chrome（而不是直接在 Node 中进行测试）的一个好处是，您的 JavaScript 测试将在与您网站的用户相同的环境中执行。无头 Chrome 可为您提供真实的浏览器上下文，而不会因运行完整版 Chrome 而产生内存开销。

设置

安装

使用 yarn 安装 Karma、相关插件和测试运行程序：

yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai

或使用 npm：

npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai

我在这篇博文中使用的是 Mocha 和 Chai，但如果您不是客户，请选择可以在浏览器中使用的您最喜欢的断言库。

配置 Karma

创建一个使用 ChromeHeadless 启动器的 karma.conf.js 文件。

karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'chai'],
    files: ['test/**/*.js'],
    reporters: ['progress'],
    port: 9876,  // karma web server port
    colors: true,
    logLevel: config.LOG_INFO,
    browsers: ['ChromeHeadless'],
    autoWatch: false,
    // singleRun: false, // Karma captures browsers, runs the tests and exits
    concurrency: Infinity
  })
}

编写测试

在 /test/test.js 中创建测试。

/test/test.js

describe('Array', () => {
  describe('#indexOf()', () => {
    it('should return -1 when the value is not present', () => {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

运行测试

在 package.json 中添加 test 脚本，以使用我们的设置运行 Karma。

package.json

"scripts": {
  "test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}

当您运行测试 (yarn test) 时，无头 Chrome 应该会启动并将结果输出到终端：

Karma 的输出。

创建您自己的无头 Chrome 启动器

ChromeHeadless 启动器非常有用，因为它可以直接在 Headless Chrome 上进行测试。它包含适合您的 Chrome 标志，并在端口 9222 上启动 Chrome 的远程调试版本。

不过，有时您可能需要将自定义标志传递给 Chrome，或更改启动器使用的远程调试端口。为此，请创建一个扩展基本 ChromeHeadless 启动器的 customLaunchers 字段：

karma.conf.js

module.exports = function(config) {
  ...

  config.set({
    browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],

    customLaunchers: {
      MyHeadlessChrome: {
        base: 'ChromeHeadless',
        flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']
      }
    },
  }
};

在 Travis CI 上运行所有这些程序

很难配置 Karma 以便在 Headless Chrome 中运行测试。 只需几行代码就可以实现 Travis 中的持续集成！

如需在 Travis 中运行测试，请使用 dist: trusty 并安装 Chrome 稳定版插件：

.travis.yml

language: node_js
node_js:
  - "7"
dist: trusty # needs Ubuntu Trusty
# Note: if you switch to sudo: false, you'll need to launch Chrome with --no-sandbox.
# See https://github.com/travis-ci/travis-ci/issues/8836
sudo: required
addons:
  chrome: stable # have Travis install Chrome stable.
cache:
  yarn: true
  directories:
    - node_modules
install:
  - yarn
script:
  - yarn test