使用 Headless Chrome 进行自动化测试

本文翻译自：Automated testing with Headless Chrome，作者是 Google 工程师 Eric Bidelman。

文章中链接较多，可以点击文章末尾的阅读原文查看这些链接。

---

先做个小调查：

scrolling="no" frameborder="0" class="vote_iframe js_editor_vote_card" data-display-style="height: 199px;" data-display-src="/cgi-bin/readtemplate?t=vote/vote-new_tmpl&__biz=MzI0NTAyNjE0NQ==&supervoteid=563937370&token=1732966329&lang=zh_CN" data-src="/mp/newappmsgvote?action=show&__biz=MzI0NTAyNjE0NQ==&supervoteid=563937370#wechat_redirect" data-supervoteid="563937370" allowfullscreen>

如果您想使用 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:

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

2. yarn add --dev mocha chai

或者使用 npm：

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

2. npm i --save-dev mocha chai

在这篇文章中，我使用 Mocha 和 Chai，如果你不喜欢这两个库，你可以选择你喜欢的任何一个库，只要它能在浏览器中运行就可以。

配置 Karma

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

karma.conf.js

1. module.exports = function(config) {

2.  config.set({

3.    frameworks: ['mocha', 'chai'],

4.    files: ['test/**/*.js'],

5.    reporters: ['progress'],

6.    port: 9876,  // karma web server port

7.    colors: true,

8.    logLevel: config.LOG_INFO,

9.    browsers: ['ChromeHeadless'],

10.    autoWatch: false,

11.    // singleRun: false, // Karma captures browsers, runs the tests and exits

12.    concurrency: Infinity

13.  })

14. }

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

写一个测试

新建文件 /test/test.js.

/test/test.js

1. describe('Array', () => {

2.  describe('#indexOf()', () => {

3.    it('should return -1 when the value is not present', () => {

4.      assert.equal(-1, [1,2,3].indexOf(4));

5.    });

6.  });

7. });

运行你的测试

在 package.json 中添加一个 test 脚本，通过前面我们的配置文件运行 Karma。

package.json

1. "scripts": {

2.  "test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"

3. }

当您运行测试（ yarn test）时，Headless Chrome 会启动并将结果输出到终端：

创建自定义的 Headless Chrome 启动器

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

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

karma.conf.js

1. module.exports = function(config) {

2.  ...

4.  config.set({

5.    browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],

7.    customLaunchers: {

8.      MyHeadlessChrome: {

9.        base: 'ChromeHeadless',

10.        flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']

11.      }

12.    },

13.  }

14. };

在 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

1. language: node_js

2. node_js:

3.  - "7"

4. dist: trusty # needs Ubuntu Trusty

5. sudo: false  # no need for virtualization.

6. addons:

7.  chrome: stable # have Travis install chrome stable.

8. cache:

9.  yarn: true

10.  directories:

11.    - node_modules

12. install:

13.  - yarn

14. script:

15.  - yarn test

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