初めてのE2Eテスト

## やった人
php, Railsを10年程度使ってきたwebエンジニア

## 前提
- php, ruby, javascriptの構文をある程度、理解している
- 1日で比較検証する
- 商品選択、確認項目、ユーザ情報入力、PDFダウンロードを行い、申込みを行う
- Macを利用している

## 参考にしたページ
@cognitom さん、E2Eテストを行えるツールを比較するにあたり、とても参考になりました、ありがとうございます！

- https://qiita.com/cognitom/items/6cce719b57341769c14d

@mt0m さん、 @edo_m18 さん、 @y-temp4 さん、 @akiko-pusu さん、各ツールの導入手順や検討に参考にさせていただき、ありがとうございます！

- https://qiita.com/mt0m/items/7e18d8802843d9f60d28
- https://qiita.com/edo_m18/items/ba7d8a95818e9c0552d9
- https://qiita.com/y-temp4/items/d488b35031a9c5b0dd85
- https://qiita.com/akiko-pusu/items/1cc7081c480630d240d7

## 動作検証したツール
- Selenium
- Protractor
- Nightmare

## Selenium
まずは、定番Selenium
[選考理由]

- E2Eテストを検索するとSeleniumについて記事をよく見かけること
- rubyで記述できること

[導入手順]
参考： https://qiita.com/edo_m18/items/ba7d8a95818e9c0552d9

ruby2.4以上をインストール

```
$ # homebrew、rbenv、rubyの2.4以上の全てがインストールされていなければ
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew doctor
Your system is ready to brew.
$ brew update
$ brew -v
Homebrew 1.7.2
Homebrew/homebrew-core (git revision 10b4f; last commit 2018-08-27)

$ # rbenvもしくは、rubyの2.4以上のどちらもインストールされていなければ
$ brew install rbenv ruby-build rbenv-gemset rbenv-gem-rehash readline
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
$ brew search gcc
$ brew tap homebrew/dupes
$ brew install apple-gcc42

$ # rubyの2.4以上がインストールされていなければ
$ rbenv --version
$ rbenv install --list
$ rbenv install 2.4.0
$ ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16]
```

Seleniumをインストール

```
$ gem install selenium-webdriver
```

サンプルコード

```ruby:example.rb
require "selenium-webdriver"

# Firefox用のドライバを使う
driver = Selenium::WebDriver.for :firefox

# Googleにアクセス
driver.navigate.to "http://google.com"

# `q`というnameを持つ要素を取得
element = driver.find_element(:name, 'q')

# `Hello WebDriver!`という文字を、上記で取得したinput要素に入力
element.send_keys "Hello WebDriver!"

# submitを実行する（つまり検索する）
element.submit

# 表示されたページのタイトルをコンソールに出力
puts driver.title

# テストを終了する（ブラウザを終了させる）
driver.quit
```

サンプルコードを実行
成功

```
$ ruby example.rb
Google
```

失敗

```
$ ruby example.rb
/Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/common/service.rb:57:in `binary_path':  Unable to find Mozilla geckodriver. Please download the server from https://github.com/mozilla/geckodriver/releases and place it somewhere on your PATH. More info at https://developer.mozilla.org/en-US/docs/Mozilla/QA/Marionette/WebDriver. (Selenium::WebDriver::Error::WebDriverError)
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/common/service.rb:47:in `initialize'
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/firefox/marionette/driver.rb:41:in `new'
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/firefox/marionette/driver.rb:41:in `initialize'
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/firefox/driver.rb:31:in `new'
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/firefox/driver.rb:31:in `new'
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver/common/driver.rb:52:in `for'
	from /Users/{username}/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.14.0/lib/selenium/webdriver.rb:86:in `for'
	from example.rb:4:in `<main>'
```

geckodriverをインストール

```
$ # ~/binがなければ
$ mkdir -p ~/bin
$ # ~/binにPATHが通ってなければ
$ vi 'export PATH=$PATH:/Users/{username}/bin' >> ~/.bash_profile
$ source ~/.bash_profile
$ mkdir ~/tmp
$ cd ~/tmp
$ curl -L https://github.com/mozilla/geckodriver/releases/download/v0.21.0/geckodriver-v0.21.0-macos.tar.gz -O
$ tar zxvf geckodriver-v0.21.0-macos.tar.gz
$ mv geckodriver ~/bin
```

## Protractor
比較的新しそうなツール

[選考理由]

- [ブラウザテストツール総まとめ・2016年夏版](https://qiita.com/cognitom/items/6cce719b57341769c14d) と、 [Protractorのテストが早すぎて目が追いつかない...](https://qiita.com/akiko-pusu/items/1cc7081c480630d240d7) で見かけたコードをみて、使ってみたいと思ったから

[導入手順]
参考： http://www.protractortest.org/#/

npmをインストール

```
$ # homebrew及び、npmがインストールされていなければ、インストール。手順は、Seleniumの導入手順を参考
...
$ # npmがインストールされていなければ
$ brew install nodebrew
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
$ nodebrew list
v10.9.0

current: v10.9.0
```

Protractorインストール

```
$ npm install -g protractor
$ webdriver-manager update
$ webdriver-manager start
Error: Failed to make Github request, rate limit reached.
```

Javaをインストールしろと言われたので、Nightmareも本日中に検証するため、一旦中止。

## Nightmare
名前がカッコイイ！
[選考理由]

- 簡単そうなインストール手順
- 簡単そうなコード

[導入手順]
参考： https://github.com/segmentio/nightmare

Nightmareをインストール

```
$ # npmのインストールは、Protractorの導入手順を参考
$ npm install --save nightmare
```

サンプルコード

```javascript:example.js
const Nightmare = require('nightmare')
const nightmare = Nightmare({ show: true })

nightmare
  .goto('https://duckduckgo.com')
  .type('#search_form_input_homepage', 'github nightmare')
  .click('#search_button_homepage')
  .wait('#r1-0 a.result__a')
  .evaluate(() => document.querySelector('#r1-0 a.result__a').href)
  .end()
  .then(console.log)
  .catch(error => {
    console.error('Search failed:', error)
  })
```

サンプルコードを実行

```
$ node example.js
https://github.com/segmentio/nightmare
```

## 考察
時間が足りず、Protractorを動作させられなかったが、どれも勉強コストを除いた導入コストは高くなさそう。

- Selenium： 言語は ruby 、browserを選択できる。
- Protractor： 後日、JAVAをインストールして、検証する
- Nightmare： 言語は、 javascript 、Seleniumは、動作が早すぎて目で追えないが、ゆっくり動作するため、目視で確認できる点が良い。

※ 最有力だと思っていたNightmareは、phantomjsのラッパーのため、開発が停止したphantomjsを利用している点はマイナスである。
[訂正] 現在は、phantomjsから、Electronへ移行していました。