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

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

これらの機能について

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

Karma は、最も一般的なテスト フレームワーク(JasmineMochaQUnit)で動作するテスト ハーネスです。

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

ヘッドレス Chrome は、完全なブラウザ UI を使用せずに、ヘッドレス環境で Chrome ブラウザを実行する方法です。Node で直接テストするのではなく、Headless Chrome を使用するメリットの一つは、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 に、設定で 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