使用 Headless Chrome 进行自动化测试

本文翻译自：Automated testing with Headless Chrome
作者：Eric Bidelman (Google 工程师)
译者：justjavac

如果您想使用 Headless Chrome 进行自动测试，请不要再观望了！本文将教你如何使用 Karma 作为 test runner ，并配合 Mocha + Chai 进行测试。

这些是什么呢？

Karma？Mocha？Chai？Headless Chrome？oh my!

• Karma 是一种测试套件，可以与任何流行的测试框架 (例如 Jasmine, Mocha, QUnit) 一起使用。

• Chai 是一个断言库，可以与 Node.js 或者浏览器一起使用。我们需要后者。

• Headless Chrome 是一种在 headless 环境运行的 Chrome 浏览器，这种运行方式没有 UI。使用 Headless Chrome（而不是直接在 Node 中测试）的好处之一是您的 JavaScript 测试将在与您网站用户相同的环境中执行。Headless Chrome 为您提供真正的浏览器环境，而无需运行完整版本的 Chrome，这样也避免了高昂的内存开销。

安装

安装依赖库

安装 Karma 已经相关的插件，可以使用 yarn:

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

创建 karma.config.js 文件，ChromeHeadless 启动器会使用这个文件。

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

注意: 运行 ./node_modules/karma/bin/ init karma.conf.js 以生成 Karma 配置文件。

写一个测试

新建文件 /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）时，Headless Chrome 会启动并将结果输出到终端：

创建自定义的 Headless Chrome 启动器

ChromeHeadless 启动器非常重要，因为它为我们提供了开箱即用的 Headless Chrome 测试。它包含适合您的
Chrome flag，并启动 Chrome 的远程调试功能，监听 9222 端口。

有时您可能希望将自定义的 flag 传递给 Chrome 或更改启动器使用的远程调试端口。我们创建一个customLaunchers 来扩展 ChromeHeadless 启动器的默认字段：

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 中做持续集成只需要几行代码！

To run your tests in Travis, use dist: trusty and install the Chrome stable addon:

要在 Travis 中运行测试，使用 dist: trusty 并安装 Chrome stable 插件：

.travis.yml

language: node_js
node_js:
  - "7"
dist: trusty # needs Ubuntu Trusty
sudo: false  # no need for virtualization.
addons:
  chrome: stable # have Travis install chrome stable.
cache:
  yarn: true
  directories:
    - node_modules
install:
  - yarn
script:
  - yarn test

注: 这个仓库（example repo）有可供参考的代码。