More than 3 years have passed since last update.

posted at

updated at

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

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


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

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

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



ChromeDriver のインストール

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


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

$ npm install selenium-standalone --save-dev

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

$ selenium-standalone install

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

  "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.

  --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 というセクションを探してください。

    capabilities: [{
        browserName: 'firefox'

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

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

--headless というフラグを指定すると、ヘッドレスモードで Chrome を実行することができます。
また、--disable-gpu も現時点(2017年9月時点)ではヘッドレスモードで実行する際に必要です。
(参考:ヘッドレス Chrome ことはじめ  |  Web  |  Google Developers

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


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

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() {
    var title = browser.getTitle()
    assert.equal(title, 'WebdriverIO - WebDriver bindings for Node.js')
$ wdio wdio.conf.js

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up