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


昔 [selenium IDE](http://www.seleniumhq.org/projects/ide/)でテストを書いて以来のseleniumですが、とある場面で使いたくなったのでその時のメモになります。

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

そこでごにょごにょググっていたら [webdriverio](http://www.webdriver.io/)ってやつのオプションを使うとセッションが引き回すことができそうなので試してみました。

## 環境

* mac OSX Yosemite (10.10.3) 


## 参考にしたサイト

* [webdriver.io](http://www.webdriver.io/)
* [webdriverio/webdriverio](https://github.com/webdriverio/webdriverio)


## 事前準備に必要なもの

* [NodeJS](https://nodejs.org/)
	* [nodebrew](https://github.com/hokaccha/nodebrew) 経由でよければ [OSXでnodebrewインストールメモ](http://qiita.com/ryurock/items/5bb3e432ab5945fdf980) を読んで[NodeJS](https://nodejs.org/)をインストールしてください
		* npm
			* [selenium-standalone](https://www.npmjs.com/package/selenium-standalone)
				* selenium-standaloneのインストール、起動などをnodeから簡単にできるnpm
			* [mocha](http://mochajs.org/)
				* BDD フレームワーク
* [Firefox](https://www.mozilla.org/ja/firefox/new/)
	* 入れていない方は ``` brew cask install firefox ``` でインスコしましょう
		* [homebrew-cask](http://caskroom.io/)を知らない方は [みんなhomebrew-caskって知ってるか？](http://qiita.com/ryurock/items/1432578d364985f6cb06) へ
* [chrome](https://www.google.co.jp/chrome/browser/desktop/)
	* 入れていない方は ``` 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
```

## テストを書く

以下サンプルです

```shell:/path/to/repo
mkdir test
touch test/sample.js
```

```node: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](https://code.google.com/p/selenium/wiki/DesiredCapabilities)のオプションは使用可能みたいです。 

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

```node: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](https://www.npmjs.com/package/selenium-standalone)で簡単に起動できます

```
selenium-standalone start
```

### mochaの実行

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

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

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