WebdriverIOの導入とテスト

メモは書いたけどやっぱり導入方法もまとめておく。

基本的にWindowsでの構築例

環境構築

以下の手順で、環境を構築する

node、npmのインストール

以下のサイトよりnodejsのLTS版をダウンロードする。
nodejs

以下のコマンドでバージョンが表示されればOK

$ node -v
$ npm -v

Chromeのインストール

本家からダウンロードしてインストール
※新しいバージョンが出ると途端にテストが動かなくなることがある。ご愛嬌。

3. プロジェクトフォルダの作成

適当な場所で、nodejsのプロジェクトを作成しておく

mkdir sample
cd sample
npm init -y

必要なツールをインストールする

# webdriverIO本体のインストール
npm install --save webdriverio

# selenium-standalone-serverを使用するためにインストール
# 入れておけば、サーバを自動的に立ち上げてくれる
npm install --save-dev wdio-selenium-standalone-service

# テストフレームワークのインストール
npm install --save-dev wdio-mocha-framework
npm install --save-dev chai

# レポーター(テスト結果の表示ツール)の導入。お好みで
npm install --save-dev wdio-dot-reporter
npm install --save-dev wdio-junit-reporter
npm install --save-dev wdio-spec-reporter

テストを作成

WebdriverIOを利用してサンプルを作成する

.\node_modules\.bin\wdio

実行するといろいろ聞かれるが、以下の2つ以外はENTERでOK

• Which reporter do you want to use?
  好きなレポーターを上下キーで選択してスペースキー。でエンター
• Do you want to add a service to your test setup?
  selenium-standaloneを選んでスペースキー。でエンター

設定を変更する

設定ファイルwdio.conf.jsにてテスト実行環境の設定を変更する。
テストするブラウザを変えるには

    capabilities: [{
        maxInstances: 5,
        browserName: 'firefox'
    }],

のbrowserNameを変更する。クロームならchrome。
同時に別ブラウザでの実行も可能。こうする、

    capabilities: [{
        maxInstances: 5,
        browserName: 'firefox'
    },{
        maxInstances: 5,
        browserName: 'chrome'
    }],

テストファイルを作成する

mkdir test && cd test && mkdir spec && cd specs && touch test.js

作成したファイルに次のように保存する

var assert = require('assert');
describe('webdriver.io page', function() {
    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');
    });
});

テストの実行

プロジェクトの直下にて、以下のコマンドでテストを実行する

.\node_module\.bin\wdio

ブラウザが立ち上がって、テストが実行される。

そのほか使い方は例のごとく本家サイト