Headless Chromeを使用した自動化テスト

Automated testing with Headless Chrome作者:Eric Bidelman(Googleエンジニア)訳者:justjavac
Headless Chromeを使用して自動テストを行いたい場合は、これ以上見ないでください.ここでは、test runnerとしてKarmaを使用する方法を教え、Mocha+Chaiと協力してテストします.
これは何ですか.
Karma?Mocha?Chai?Headless Chrome?oh my!

Karmaは、Jasmine、Mocha、QUnitなどの一般的なテストフレームワークとともに使用できるテストキットです.

Chaiは、Node.jsまたはブラウザとともに使用できる断言ライブラリです.後者が必要です.

Headless Chromeは、UIがないheadless環境で実行されるChromeブラウザです.Nodeで直接テストするのではなく、Headless Chromeを使用するメリットの1つは、JavaScriptテストがWebサイトのユーザーと同じ環境で実行されることです.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を使用しています.この2つのライブラリが好きでない場合は、ブラウザで実行できる限り、好きなライブラリを選択することができます.
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
  })
}

注:Karmaプロファイルを生成するには、./node_modules/karma/bin/ init karma.conf.jsを実行します.
テストを書く
新規ファイル/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)には参照可能なコードがあります.