WebdriverIO + ヘッドレス Chromeでローカルブラウザテスト

More than 1 year has passed since last update.

WebdriverIO からヘッドレス Chrome を起動してブラウザテストを実施する手順をまとめます。


必要条件


  • Chrome 59 以降がインストールされていること


WebdriverIO およびブラウザテストについて

Seleniumアレルギーのための処方箋 - Qiita にとても詳しくまとめられていますので、ぜひご一読ください。

本投稿は、この記事にある、以下の構成図の「Local」という枠の中に関する話です。ここの「PhantomJS」のかわりに「ヘッドレスChrome」を利用する方法について紹介します。

image.png


導入手順


ChromeDriver のインストール

WebdriverIO から ヘッドレスChrome を起動するには ChromeDriver が必要です。

公式サイトから直接ダウンロードしてもよいのですが、パスを通したり、異なるプラットフォーム(OS)に対応したインストールプロセスを組んだりしなければならないのがちょっと面倒です。

そのあたりをいい感じに面倒みてくれる selenium-standalone を利用するのがおすすめです。

$ npm install selenium-standalone --save-dev

selenium-standalone をインストールした後、

$ selenium-standalone install

を実行すると ChromeDriver がインストールされて実行可能になります。npm-scriptspostinstall コマンドに定義しておくと、他の人がプロジェクトを導入するときに親切ですね。


package.json

{

"scripts": {
"postinstall": "selenium-standalone install"
}
}


WebdriverIO のインストール

次に WebdriverIO をインストールします。

$ npm install webdriverio --save-dev

これで wdio というコマンドが使えるようになります。

$ wdio --help

WebdriverIO CLI runner

Usage: wdio [options] [configFile]
Usage: wdio config
Usage: wdio repl [browserName]
config file defaults to wdio.conf.js
The [options] object will override values from the config file.

Options:
--help, -h prints WebdriverIO help menu
--version, -v prints WebdriverIO version
--host Selenium server host address
--port Selenium server port
--path Selenium server path (default: /wd/hub)
--user, -u username if using a cloud service as Selenium backend
--key, -k corresponding access key to the user
--watch watch specs for changes
--logLevel, -l level of logging verbosity (default: silent)
--coloredLogs, -c if true enables colors for log output (default: true) [default: true]
--bail stop test runner after specific amount of tests have failed (default: 0 - don't bail)
--screenshotPath, -s saves a screenshot to a given path if a command fails
--baseUrl, -b shorten url command calls by setting a base url
--waitforTimeout, -w timeout for all waitForXXX commands (default: 1000ms)
--framework, -f defines the framework (Mocha, Jasmine or Cucumber) to run the specs (default: mocha)
--reporters, -r reporters to print out the results on stdout
--suite overwrites the specs attribute and runs the defined suite
--spec run only a certain spec file
--cucumberOpts.* Cucumber options, see the full list options at https://github.com/webdriverio/wdio-cucumber-framework#cucumberopts-options
--jasmineOpts.* Jasmine options, see the full list options at https://github.com/webdriverio/wdio-jasmine-framework#jasminenodeopts-options
--mochaOpts.* Mocha options, see the full list options at http://mochajs.org


WebdriverIO の設定

次に WebdriverIO の設定ファイルを作成します。wdio config を実行すると、設定ファイルを生成するためのウィザードが始まります。

kaizen-popup-js (bash) 2017-07-24 15-30-16.png

framework や reporter は好きなものを選んでください。

Do you want to add a service to your test setup?」という質問では 「selenium-standalone」 を選びます。

完了すると wdio.conf.js が生成されるので、ファイルを開いて capabilities というセクションを探してください。


wdio.conf.js

    capabilities: [{

browserName: 'firefox'
}],

デフォルトでは Firefox が起動するようになっています。次のように変更して、ヘッドレスChrome を使うようにします。


wdio.conf.js

    capabilities: [{

browserName: 'chrome',
chromeOptions: {
args: ['--headless', '--disable-gpu'],
},
}],

--headless というフラグを指定すると、ヘッドレスモードで Chrome を実行することができます。

また、--disable-gpu も現時点(2017年9月時点)ではヘッドレスモードで実行する際に必要です。

(参考:ヘッドレス Chrome ことはじめ  |  Web  |  Google Developers

なお、これらのフラグを指定しなかった場合は、通常モードの Chrome が起動します。


テストの実行

試しに、適当なテストコードを用意して、wdio コマンドでテストを実行してみましょう。


test/specs/test.js

var assert = require('assert')

describe('webdriver.io page', function() {
it('should be a pending test')

it('should have the right title - the fancy generator way', function() {
browser.url('http://webdriver.io/')
var title = browser.getTitle()
assert.equal(title, 'WebdriverIO - WebDriver bindings for Node.js')
})
})


$ wdio wdio.conf.js

macOS の場合だと、Dock に Chrome のアイコンが出現して(ブラウザウインドウは表示されません)、テストが実行されれば成功です。:tada: