使用 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 justjavac

建立自定义的 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）有可供参考的代码。