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

  • 9
    いいね
  • 0
    コメント

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: