最近、「WebdriverIO がいい」という話を耳にしたので使ってみました。
軽く実案件の自動テストにも組み込んでみたのですが、かなり使いやすいと感じたので簡単に使い方をご紹介します。

WebdriverIOとは

UI操作を自動化するためのJSライブラリです。（執筆現在の最新バージョンはv4.2.8）
ブラウザ操作を同期的に記述でき、APIもシンプルに記述できるよう配慮されているため、
複雑になりがちなUI操作のテストコードをかなりシンプルに記述することができます。

構成

今回は以下の環境・バージョンで試しました。

OS : Mac OS El Capitan 10.11.6（15G31）
NodeJS : v6.4.0
Chrome バージョン 52.0.2743.116 (64-bit)

webdriverio : 4.2.8
selenium-standalone : 5.6.1
※ selenium standalone serverをjavascriptから立てるためのライブラリです。

今回はローカルにselenium standalone serverを立ててでテストを実行する想定で書いていますが、
リモートマシンやSelenium Gridだけでなく、
テスティングクラウドサービス（Sause Labs/Browserstack/Testingbot）等との連携も可能です。

インストール

（npm initは完了しているものとして）、ひとまずWebdriverIOをインストールしましょう。

$ npm install webdriverio --save-dev

また、selenium standalone serverを立ち上げる必要があるので、selenium-standaloneをインストールしておきます。

$ npm install selenium-standalone --save-dev

設定ファイル作成

次に、wdioを実行するための設定ファイルを作成します。
npm initやkarma initのように、対話的に設定ファイルを作成できるwdioのconfigコマンドが用意されているので利用しましょう。

$ ./node_modules/.bin/wdio config

質問内容は以下のとおりです。
※ ライブラリやadapterをインストールするか？という質問は省略しています

1. Seleniumの動作環境（On my local machine）
2. 使用するテストフレームワーク（jasmine）
3. Specファイルの配置場所（./test/specs/*.js）
4. 使用するレポーターの種類（dots）
5. 使用するサービス（selenium-standalone）
6. logレベル（error）
7. エラー発生時のスクリーンショットの配置場所（./errorShots）
8. テストサーバーのbase url（localhost:8000）

テストの実行

先ほど指定した場所にテストを作成・配置し、以下のコマンドでwdio testrunnerを実行します。
wdio.conf.jsのserviceにselenium-standaloneを登録しておくとテスト実行時に自動でselenium standalone serverが立ち上がります

$ ./node_modules/.bin/wdio

サンプルコード

典型的な操作をいくつかピックアップしてご紹介していきます。

※ browserオブジェクトについて
wdio test runnerを使用した場合、webdriverのインスタンスにbrowserというグローバル変数でアクセスできるようになります。（参考 ）

ブラウザにアクセスしてタイトルを取得する

describe('WDIOのテスト', () => {
    it('画面の表示', () => {
        browser.url('/index.html');
        expect(browser.getTitle()).toBe('Hello WebdriverIO');
    });  
});

ユーザーIDとパスワードを入力してログイン

describe('Login Page', () => {
    beforeEach(() => {
        browser.url('/index.html');
    });
    it('should translate to todo list when submit correct userid  & password', () => {
        let title = browser.setValue('#userid', 'test@example.com')
            .setValue('#password', 'password')
            .click('#login')
            .getTitle();
        expect(title).toBe('Login Succeeded');
    });
});

キャプチャの取得

describe('Login Page', () => {
    beforeEach(() => {
        browser.url('/login.php');
    });
    it('should have right title', () => {
        browser.saveScreenshot('./images/login.png');
    });
});

また、こちらのページを参考にPage Objectを作成しておくと、より読みやすく変更に強いテストが作成できそうです。

wdio test runnerを使用しない場合

他のテストランナーと組み合わせる場合は非同期なAPIとなります。
以下のサンプルのようにco + generatorで同期的に書くこともできますが、いちいちyieldで止める必要があるので少々不便になります。

例：jasmine + jasmine-co + webdriverioを組み合わせて使用する場合のサンプルです。

require('jasmine-co').install();
const webdriverio = require('webdriverio');
const browser = webdriverio.remote({
    desiredCapabilities: { browserName: 'chrome' },
    baseUrl: 'http://127.0.0.1:8000'
});
describe('Login Page', () => {
    beforeAll(function* () {
        yield browser.init();
    });
    beforeEach(function* () {
        yield browser.url('/login.php');
    });
    it('should have right title', function* () {
        let title = yield browser.getTitle();
        expect(title).toBe('Login Page');
    });
});

あとがき

簡単な機能しか紹介していませんが、いかがでしたでしょうか。

次期Mac OS Xにて SafariのWebDriver Supportが発表され、各ブラウザのWebDriverが一通り揃いつつあります。
また、今回紹介したWebdriverIOに限らずクライアント側のツールもこなれてきました。

UIテスト自動化を試してみるにはいい時期になってきたのではないでしょうか。
その時には是非WebdriverIOを試してみてください。