2017月07月05日

Chrome Headless ブラウザでテストを実行する

Google Chrome 59 から Headless モードが使用できるようになり、PhantomJS の代わりに Chrome を使ってヘッドレステストができるようになりました。各種テストランナーの対応も進んでいるようで、例えば、Karmakarma-chrome-launcher v2.2.0 で既に対応されていました。特にテストランナー側で対応されていなくても、コマンドライン引数が渡せれば Headless モードを使えるようなので、どんどん使っていきましょう!

Karma

Karma は Headless Chrome を起動するために必要なことがすでに準備されているので、簡単に対応することができます。

1) karma-chrome-launcher の v2.2.0 以降と、Karma を起動するために必要な依存モジュールをインストールします。

$ npm install --save-dev karma karma-chrome-launcher # 適宜その他の依存をインストールする

2) karma.conf.js の browsers に ChromeHeadless を指定します。

module.exports = function(config) {
  config.set({
    // ...
    browsers: ['ChromeHeadless']
  })
}

3) 普通にテストを実行すると Headless Chrome が起動します。簡単!

$ ./node_modules/karma/bin/karma start --single-run

Testem

筆者は Karma の他に、Testem というテストランナーを使う時があります。Testem で Headless Chrome を起動するときは直接コマンドライン引数を渡しましょう。

1) testem をインストールします。

$ npm install --save-dev testem

2) 設定ファイル testem.yml を作成し、以下のように、Chrome を使用し、コマンドライン引数を渡す設定を書きます。--headless, --remote-debugging-port=9222 が必要で、--disable-gpu はバグを避けるために今は指定する必要があるようです。

---
  # プロジェクトに合わせて変える
  framework: mocha
  src_files:
    - test/**/*.js

  # Dev モードで Chrome を使用する
  launch_in_dev:
    - Chrome

  # コマンドライン引数を渡し、Headless モードで起動させる
  browser_args:
    Chrome:
      - --headless
      - --disable-gpu
      - --remote-debugging-port=9222

3) Testem を起動すると Headless Chrome でテストが実行されます。

$ ./node_modules/.bin/testem

Nightwatch

Nightwatch は E2E テストフレームワークですが、これも Headless Chrome でテストを実行することができます。

1) nightwatch、chromedriver、selenium-server とその他必要な依存モジュールを適宜インストールします。(Selenium を動かすために必要な JDK も別途インストールしましょう)

$ npm install --save-dev nightwatch chromedriver selenium-server

2) 設定ファイル nightwatch.conf.js に Headless Chrome を動かすために必要な設定を追加します。重要なのは test_settings の部分で、desiredCapabilities 内で Chrome を起動することと、そのコマンドライン引数を指定しています。Nightwatch の場合はどうやら --remote-debugging-port の指定は必要ないようでした。(理由はよくわからず……)

module.exports = {
  // プロジェクトに合わせて変える
  src_folders: ['e2e/specs'],
  output_folder: 'e2e/reports',

  // Selenium サーバーの設定
  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      launch_url: '...',
      desiredCapabilities: {
        // Chrome を使用する
        browserName: 'chrome',

        // コマンドライン引数を渡し、Headless モードで起動させる
        chromeOptions: {
          args: [
            '--headless',
            '--disable-gpu'
          ]
        }
      }
    }
  }
}

3) 設定ファイルを指定して Nightwatch を起動すると、Headless Chrome でテストが実行されます!

$ ./node_modules/.bin/nightwatch -c nightwatch.conf.js

まとめ

本記事では Karma、Testem、Nightwatch において、Headless Chrome でテストを実行する方法を解説しました。もうすでに Chrome の安定版で Headless モードが使用できるようになっているため、PhantomJS の出番も徐々に減っていくのではないかなと思います。

その他参考サイト

RELATED POSTS