LoginSignup
5
3

More than 5 years have passed since last update.

@kshimadutsu(耕平 島筒)

初めてのE2Eテスト

Last updated at Posted at 2018-08-27

やった人

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

前提

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

参考にしたページ

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

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

動作検証したツール

  • 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

サンプルコード

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

比較的新しそうなツール

[選考理由]

[導入手順]
参考： 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

サンプルコード

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へ移行していました。

5
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3