运用HeadlessChrome举行自动化测试

本文翻译自：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 启动器

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