使用无头 Chrome 进行自动化测试

如果您想使用无头 Chrome 运行自动化测试，不妨试试这篇文章！本文将介绍如何使用 Karma 作为运行程序，并使用 Mocha+Chai 编写测试。

这些构成元素有哪些呢？

Karma、Mocha、Chai、无头 Chrome，天哪！

Karma 是一个测试框架，可与任何最流行的测试框架（Jasmine、Mocha、QUnit）搭配使用。

Chai 是一个断言库，可在 Node 和浏览器中使用。我们需要后者。

无头 Chrome 是一种在无头环境中运行 Chrome 浏览器的方法，无需完整的浏览器界面。使用无头 Chrome（而不是直接在 Node 中进行测试）的好处之一是，您的 JavaScript 测试将在与您网站用户相同的环境中执行。无头 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 和 Chai，但如果您不喜欢它们，可以选择自己喜欢的适用于浏览器的断言库。

配置 Karma

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

编写测试

在 /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) 时，无头 Chrome 应启动并将结果输出到终端：

Karma 的输出。

创建自己的 Headless Chrome 启动器

ChromeHeadless 启动器非常棒，因为它开箱即用，可在无头 Chrome 上进行测试。该脚本包含适当的 Chrome 标志，并会在端口 9222 上启动远程调试版 Chrome。

不过，有时您可能需要将自定义标志传递给 Chrome，或者更改启动器使用的远程调试端口。为此，请创建一个扩展基本 ChromeHeadless 启动器的 customLaunchers 字段：

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 以在无头 Chrome 中运行测试是最难的部分。只需几行代码，即可在 Travis 中实现持续集成！

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

.travis.yml

language: node_js
node_js:
  - "7"
dist: trusty # needs Ubuntu Trusty
# Note: if you switch to sudo: false, you'll need to launch Chrome with --no-sandbox.
# See https://github.com/travis-ci/travis-ci/issues/8836
sudo: required
addons:
  chrome: stable # have Travis install Chrome stable.
cache:
  yarn: true
  directories:
    - node_modules
install:
  - yarn
script:
  - yarn test