使用 Headless Chrome 进行自动化测试
如果你想使用 Headless Chrome 进行自动化测试，那么就往下！这篇文章将让你完全使用 Karma 作为运行器（runner），并且使用 Mocha+Chai 来编撰测试。
Chrome Headless
如果你想使用 Headless Chrome 进行自动化测试，那么就往下！这篇文章将让你完全使用 Karma 作为运行器（runner），并且使用 Mocha+Chai 来编撰测试。
![](/data/attachment/album/201709/12/150805oxtnywgwkgwct55k.png)


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


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


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


[Karma](https://karma-runner.github.io/) 是一个测试工具，可以和所有最流行的测试框架（[Jasmine](https://jasmine.github.io/)、[Mocha](https://mochajs.org/)、 [QUnit](https://qunitjs.com/)）配合使用。


[Chai](http://chaijs.com/) 是一个断言库，可以与 Node 和浏览器一起使用。这里我们需要后者。


[Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome) 是一种在没有浏览器用户界面的无需显示环境中运行 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](https://mochajs.org/) 和 [Chai](http://chaijs.com/)，但是你也可以选择自己最喜欢的在浏览器中工作的断言库。


#### 配置 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 会启动并将运行结果输出到终端：


![](/data/attachment/album/201709/12/151002mihg3iv4zarhpmm3.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](https://developers.google.com/web/resources/contributors#ericbidelman) 谷歌工程师，Lighthouse 开发，Web 和 Web 组件开发，Chrome 开发




---


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


作者：[Eric Bidelman](https://developers.google.com/web/resources/contributors#ericbidelman) 译者：[firmianay](https://github.com/firmianay) 校对：[wxy](https://github.com/wxy)


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

