フロントエンド・テストツール比較 Selenium #01環境構築編

## はじめに
[株式会社クリエイス](http://creaith.jp/)CTOの[志村](https://qiita.com/naoto1222)です。
うちの社員の[曽宮](https://qiita.com/ryosomiya)が「Puppeteerっていうテストツールが便利なんですよー」というので、
**Seleniumだって同じことできるっしょ**ってことでPuppeteer VS Seleniumをやってみようということになりました。

## この記事でやること
Seleniumの環境構築を行い、Headless-Chromeが動くのを確認するまで

テストの実施はこちら
**[フロントエンド・テストツール比較 Selenium #02テスト編](https://qiita.com/creaith/items/e654fae65811a0df74f3)**

## 登場人物
### Selenium班(この記事の筆者)  
* [志村](https://qiita.com/naoto1222)、[モトキ](https://qiita.com/pickles)  
自分はセコセコとテストページを作成しつつ、社員のモトキはSeleniumの環境構築を進めていきます。

### 対するPuppeteer班
* [上田](https://qiita.com/uedashuhei)、[曽宮](https://qiita.com/ryosomiya)   
[フロントエンド・テストツール比較 Puppeteer #01環境構築編 - Qiita](https://qiita.com/creaith/items/212d5533f07f600b4f2a)

## 前提条件
|使用する技術|バージョン番号|
|---|---|
|macOS HighSierra|10.13.3|
|Homebrew|1.5.4|
|nodebrew|0.9.7|
|node|v8.9.4|
|npm|5.6.0|
|Google Chrome|64.0.3282.140（Official Build）|

## 環境構築手順
```zsh
# 作業ディレクトリ作成(以降、フルパスを参照するときは/path/to/seleniumと記述)
$ mkdir selenium && cd selenium

# 空ファイル作成
$ echo "{}" > package.json

# SeleniumStandaloneをインストール
$ npm install selenium-standalone --save-dev

# 以降、/path/to/selenium/node_modules/.binにPath通していたら、短く書けます
$ node_modules/.bin/selenium-standalone install

# WebDriverIOをインストール
$ npm install webdriverio --save-dev

# WebDriverIOの設定(別記1参照のこと)
$ node_modules/.bin/wdio config
 
# HeadlessChromeを使うように修正(別記2参照のこと)
$ vi wdio.conf.js

# TestCaseを記述
$ mkdir -p test/spec
$ vi test/specs/test.js
```

### 別記1: WebDriverIOの設定 `node_modules/.bin/wdio config`
```zsh
$ 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? # ここではdotを選択
? Do you want to add a service to your test setup? # selenium-standaloneを選択
? Level of logging verbosity error # errorを選択
? In which directory should screenshots gets saved if a command fails? ./errorShots/
 + t/s/test.js
```

### 別記2: HeadlessChromeを使う設定 `wdio.conf.js`

```js
// 中略
    capabilities: [{
        //browserName: 'firefox'
        browserName: 'chrome',
        chromeOptions: {
          args: ['--headless', '--disable-gpu'],
        },
    }],
// 後略

```

## テストケースのサンプルコード `test/specs/test.js`
`it()`がテストケースの単位になります。ここでは2件設定します。
WebdriverIOのAPIドキュメントは[こちら](http://webdriver.io/api.html)

```javascript
var assert = require('assert')

describe('webdriver.io page', function() {
  it('should be a pending test')

  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')
  })
})
```

## Selenium立ち上げ(別プロセスのシェルで実行)
seleniumを立ち上げます。
テストが終わった後に`Ctrl-C`で終了します。

```zsh
$ cd /path/to/selenium
$ node_modules/.bin/selenium-standalone start
```

## テストケースの実行
2件処理されるはずです。

```
$ node_modules/.bin/wdio wdio.conf.js
```

## 次回
次回はSPA(react-redux)のテストページを使って実際のテストを行っていきます。
**[フロントエンド・テストツール比較 Selenium #02テスト編](https://qiita.com/creaith/items/e654fae65811a0df74f3)**