Get Started

Install

mkdir webdriverio-app
cd webdriverio-app
npm init
npm install webdriverio --save-dev

selenium standalone serverやchromedriverをnpmでインストールする。

npm install selenium-standalone
./node_module/.bin/selenium-standalone install

WebdriverIO - Selenium Standalone Serviceを使うとseleniumを自動で起動してくれるので使う。

npm install wdio-selenium-standalone-service --save-dev

設定する

wdio.conf.jsを作成する。

$ ./node_modules/.bin/wdio config

=========================
WDIO Configuration Helper
=========================

? Where do you want to execute your tests? On my local machine
? Which framework do you want to use? mocha
? Shall I install the framework adapter for you? Yes
? Where are your test specs located? ./test/specs/**/*.js
? Which reporter do you want to use?
? Do you want to add a service to your test setup?  selenium-standalone - https://github.com/webdriverio/wdio-selenium-standalone-service
? Shall I install the services for you? Yes
? Level of logging verbosity verbose
? In which directory should screenshots gets saved if a command fails? ./errorShots/
? What is the base url? http://localhost

Installing wdio packages:

wdio.conf.jsを修正する。

browserNameはデフォルトではfirefoxになっているが、クラッシュするのでchromeに変更する。

    // services: [],//

となっている部分は

    services: ['selenium-standalone'],

に変更する(WebdriverIO - Selenium Standalone Service)。

テストを作成する

test/specs以下にsample.jsを作成して

describe('DuckDuckGo search', function() {
    it('searches for WebdriverIO', function() {
        browser.url('https://duckduckgo.com/');
        browser.setValue('#search_form_input_homepage', 'WebdriverIO');
        browser.click('#search_button_homepage');
        var title = browser.getTitle();
        console.log('Title is: ' + title);
        // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
    });
});

を記述する(WebdriverIO - How to use WebdriverIOのコード)。

テストを実行する

./node_modules/.bin/wdio wdio.conf.js

で実行する。

Mocha & Chaiを使う

Mochaを使うために

npm install wdio-mocha-framework --save-dev

する。wdio configを使って、テストフレームワークでmochaを選択した場合は入っているかも。

Chaiを使うとshouldとかexpectが使えるようになる。

$ npm install chai --save-dev

wdio.conf.jsに

    before: function() {
      var chai = require('chai');
      global.expect = chai.expect;
      chai.Should();
    },

を書く。

ページロード時の待ち時間を短くする

Use DOMContentLoaded event · Issue #995 · webdriverio/webdriverioのよるとWebdriverIOはloadまで待つが、pageLoadStrategyのオプションでeagerを指定すると、DOMContentLoaded後に実行できるようになる。

オプションについてはWebdriverIO - Configuration参照。 現在対応しているブラウザはFirefoxのみ

タイムアウト

WebdriverIOのテストは非同期に行われるため、タイムアウトが設定されている。一つのテストはタイムアウトはデフォルトでは10秒以内になっている。

この設定を変更するには、テストフレームワークにmochaを使っている場合は

// wdio.conf.js
exports.config = {
    // ...
    framework: 'mocha',
    mochaOpts: {
        timeout: 20000
    },
    // ...
}

のように設定する(WebdriverIO - Timeouts)。