使用 Headless Chrome 进行自动化测试
============================================================

如果你想使用 Headless Chrome 进行自动化测试，那么就往下！这篇文章将让你完全使用 Karma 作为<ruby>运行器<rt>runner</rt></ruby>，并且使用 Mocha+Chai 来编撰测试。

**这些东西是什么？**

Karma、Mocha、Chai、Headless Chrome，哦，我的天哪！

[Karma][2] 是一个测试工具，可以和所有最流行的测试框架（[Jasmine][3]、[Mocha][4]、 [QUnit][5]）配合使用。

[Chai][6] 是一个断言库，可以与 Node 和浏览器一起使用。这里我们需要后者。

[Headless Chrome][7] 是一种在没有浏览器用户界面的无需显示环境中运行 Chrome 浏览器的方法。使用 Headless Chrome（而不是直接在 Node 中测试） 的一个好处是 JavaScript 测试将在与你的网站用户相同的环境中执行。Headless 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][8] 和 [Chai][9]，但是你也可以选择自己最喜欢的在浏览器中工作的断言库。

#### 配置 Karma

创建一个使用 `ChromeHeadless` 启动器的 `karma.config.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
  })
}
```

> **注意：** 运行 `./node_modules/karma/bin/karma 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));
    });
  });
});
```

### 运行你的测试

在我们设置好用于运行 Karma 的 `package.json` 中添加一个测试脚本。

**package.json**：

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

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

![Output from Karma](https://developers.google.com/web/updates/images/2017/06/headless-karma.png)

### 创建你自己的 Headless Chrome 启动器

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

但是，有时你可能希望将自定义的标志传递给 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 上运行它

在 Headless Chrome 中配置 Karma 运行测试是很困难的。而在 Travis 中持续集成就只有几种！

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

**.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
```

--------------------------------------------------------------------------------

作者简介

[Eric Bidelman][1] 谷歌工程师，Lighthouse 开发，Web 和 Web 组件开发，Chrome 开发

----------------

via: https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai

作者：[Eric Bidelman][a]
译者：[firmianay](https://github.com/firmianay)
校对：[wxy](https://github.com/wxy)

本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出

[a]:https://developers.google.com/web/resources/contributors#ericbidelman
[1]:https://developers.google.com/web/resources/contributors#ericbidelman
[2]:https://karma-runner.github.io/
[3]:https://jasmine.github.io/
[4]:https://mochajs.org/
[5]:https://qunitjs.com/
[6]:http://chaijs.com/
[7]:https://developers.google.com/web/updates/2017/04/headless-chrome
[8]:https://mochajs.org/
[9]:http://chaijs.com/