ヘッドレス Chrome による自動テスト

Headless Chrome を使用して自動テストを実行したい場合は、この記事では、ランナーとして Karma を使用し、テストの作成に Mocha+Chai を使用するようにセットアップします。

これらは何ですか？

Karma、Mocha、Chai、ヘッドレス Chrome など。

Karma は、最も一般的なテスト フレームワーク（Jasmine、Mocha、QUnit）で動作するテスト ハーネスです。

Chai は、Node とブラウザで動作するアサーション ライブラリです。後者が必要です。

ヘッドレス Chrome は、完全なブラウザ UI のないヘッドレス環境で Chrome ブラウザを実行する方法です。Node で直接テストするのではなく、ヘッドレス Chrome を使用する利点の 1 つは、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 に、設定で Karma を実行する test スクリプトを追加します。

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 で実行

ヘッドレス Chrome でテストを実行するように Karma を構成するのが難しい部分です。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