webdriverio + selenium + mocha でE2Eテストをしてみる

昔 selenium IDEでテストを書いて以来のseleniumですが、とある場面で使いたくなったのでその時のメモになります。

一番初めは Capybara + rspec + selenium　で書こうと思ったいたのですが、自分の書き方が悪いのかどうしてもseleniumのsessionがテストを実行するたびにクリアされてしまいログインのテストができなかった。。。。。。

そこでごにょごにょググっていたら webdriverioってやつのオプションを使うとセッションが引き回すことができそうなので試してみました。

環境

• mac OSX Yosemite (10.10.3)

参考にしたサイト

• webdriver.io
• webdriverio/webdriverio

事前準備に必要なもの

• NodeJS
  • nodebrew 経由でよければ OSXでnodebrewインストールメモ を読んでNodeJSをインストールしてください
    • npm
      • selenium-standalone
        • selenium-standaloneのインストール、起動などをnodeから簡単にできるnpm
      • mocha
        • BDD フレームワーク
• Firefox
  • 入れていない方は brew cask install firefox でインスコしましょう
    • homebrew-caskを知らない方は みんなhomebrew-caskって知ってるか？ へ
• chrome
  • 入れていない方は brew cask install chrome でインスコしましょう

npmでselenium standaloneをインストールする

インストール済みの場合は飛ばしてください。

npmにselenium-standalone を簡単にインストールできるnpmがあるのでそれを今回は使いました

npm install selenium-standalone -g

npmでmochaをインストールする

インストール済みの場合は飛ばしてください。

npm install mocha -g

package.jsonに必要なモジュールを記載する

chaiはお好みで

package.json

{
  "dependencies": {
    "webdriverio": "~2.4.5",
    "chai": "~1.8.1"
  }
}

その後

npm install

テストを書く

以下サンプルです

/path/to/repo

mkdir test
touch test/sample.js

test/sample.js

var chai        = require('chai'),
    assert      = chai.assert,
    expect      = chai.expect,
    webdriverio = require('webdriverio');

describe('github', function(){

    this.timeout(99999999);
    var client = {};
    var url = 'https://github.com';

    before(function(done){
      client = webdriverio.remote({ 
        desiredCapabilities: {browserName: 'chrome'},
        singleton: true
      });
      client.init(done);
    });

    it('github login', function(done) {
      client
        .url(url + '/login/')
        .setValue('input[name=login]', process.env.USER_EMAIL)
        .setValue('input[name=password]', process.env.USER_PASSWORD)
        .click('input[name=commit]').click
        .call(done)
    });

    it('タイトルを確認する', function(done) {
      client
        .url(url)
        .getTitle()
            .then(function(title) {
              should.become('github');      
            })
            .catch(function(error){
              console.log(error);
            })
         .end(done)
    });

    after(function(done) {
      client.end(done);
    });
});

追ってテスト内容の部分を補足します

webdriverio.remote

主にseleniumの設定を記載できます

desiredCapabilities

seleniumの設定をここに記載できます。seleniumのDesiredCapabilitiesのオプションは使用可能みたいです。

ユーザーエージェントを変更したい場合は下記のように記述します

hoge.js

      client = webdriverio.remote({ 
        desiredCapabilities: {
          browserName: 'chrome',
          chromeOptions: {
            args: ['user-agent=Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53']
          }
        }

singleton

テスト実行時にシナリオを消化するたびに新しいブラウザをopenしない場合は設定してください。

client

立ち上げたブラウザの振る舞いを記述できます。

client.url

urlをopenします
第２引数にcallbackを渡すことも可能です。

client.setValue(selector, value)

入力フォームに値をsetします。
今回はmochaの実行時に変数を設定した値を突っ込んでいます。

client.click

選択したselectorをclickします。
リンクも同様にこのメソッドでクリックできます。

テストの実行

記載したテストの実行をしてみます

selenium standaloneサーバーの起動

インストールしたselenium-standaloneで簡単に起動できます

selenium-standalone start

mochaの実行

先ほど実行したseleniumとは別のターミナルで開いて実行してください

USER_EMAIL={Your github email} USER_PASSWORD={Your github password} mocha test/*

chromeが立ち上がればOKです。