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

Eric Bidelman

如果您想使用无头 Chrome 运行自动化测试,无需进一步!本文将向您介绍如何使用 Karma 作为运行者并使用 Mocha+Chai 编写测试。

这些是什么?

卡尔玛、摩卡、茶、无头 Chrome,我的天哪!

Karma 是一种自动化测试框架,可与任何最常用的测试框架(JasmineMochaQUnit)搭配使用。

Chai 是一个适用于 Node 且在浏览器中使用的断言库。我们需要后者。

无头 Chrome 是一种在没有完整浏览器界面的无头环境中运行 Chrome 浏览器的方法。使用 Headless 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

在本博文中,我使用了 MochaChai,但如果您不喜欢这些代码,可以选择在浏览器中运行偏好的断言库。

配置 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 的输出。

创建自己的无头 Chrome 启动器

ChromeHeadless 启动器非常强大,因为它可以直接在无头 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 上运行全部代码

配置 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