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


[WebdriverIO](http://webdriver.io/) からヘッドレス Chrome を起動してブラウザテストを実施する手順をまとめます。

# 必要条件

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

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

[Seleniumアレルギーのための処方箋 \- Qiita](http://qiita.com/cognitom/items/27b7375bea653b414c8f) にとても詳しくまとめられていますので、ぜひご一読ください。
本投稿は、この記事にある、以下の構成図の「Local」という枠の中に関する話です。ここの「PhantomJS」のかわりに「ヘッドレスChrome」を利用する方法について紹介します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/4629/61efae84-9eaa-14ee-6d72-c8869de9373b.png)


# 導入手順

## ChromeDriver のインストール

WebdriverIO から ヘッドレスChrome を起動するには [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) が必要です。

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

そのあたりをいい感じに面倒みてくれる [selenium\-standalone](https://www.npmjs.com/package/selenium-standalone) を利用するのがおすすめです。

```bash
$ npm install selenium-standalone --save-dev
```

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

```bash
$ selenium-standalone install
```

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

```package.json
{
  "scripts": {
    "postinstall": "selenium-standalone install"
  }
}
```

## WebdriverIO のインストール

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

```bash
$ npm install webdriverio --save-dev
```

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

```bash
$ 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](https://qiita-image-store.s3.amazonaws.com/0/4629/abbe41db-2dfd-b20a-b34a-14146f87a3c2.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',
        'goog:chromeOptions': {
          args: ['--headless', '--disable-gpu'],
        },
    }],
```

`--headless` というフラグを指定すると、ヘッドレスモードで Chrome を実行することができます。
また、`--disable-gpu` も現時点（2017年9月時点）ではヘッドレスモードで実行する際に必要です。
（参考：[ヘッドレス Chrome ことはじめ  \|  Web  \|  Google Developers](https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja)）

なお、これらのフラグを指定しなかった場合は、通常モードの 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')
  })
})
```

```bash
$ wdio wdio.conf.js
```

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