Help us understand the problem. What is going on with this article?

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

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',
        'goog: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:

dr-ubie
病気予測AIによる病院向け問診サービス、及び to C 向け病気予測サービスを運営するスタートアップ
https://ubie.life/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした