阅读 2501

使用 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!

  • 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复制代码

在这篇文章中,我使用 MochaChai,如果你不喜欢这两个库,你可以选择你喜欢的任何一个库,只要它能在浏览器中运行就可以。

配置 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 justjavac
Headless Chrome justjavac

创建自定义的 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)有可供参考的代码。

关注下面的标签,发现更多相似文章
评论