使用 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!
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）有可供参考的代码。