Google Chrome 59 から Headless モードが使用できるようになり、PhantomJS の代わりに Chrome を使ってヘッドレステストができるようになりました。各種テストランナーの対応も進んでいるようで、例えば、Karma は karma-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 の出番も徐々に減っていくのではないかなと思います。