[Capybara] [RSpec] [Poltergeist] [Turnip] E2Eテストを自動化する手順

WebシステムのE2E（End-to-End）テストの自動化を、Capybara + RSpec + Poltergeist + Turnipで行ってみました。新規に自動化のスクリプトを作っていく手順を備忘で書いておきます。環境はMacOSX EI Capitanです。

	# ディレクトリ名は適当に決めてください
	$ mkdir test
	$ cd test
	$ bundle init

view raw make_test.sh hosted with ❤ by GitHub

Gemfileを次の内容に更新します。

	source "https://rubygems.org"
	gem 'turnip'
	gem 'capybara'
	gem 'poltergeist'

view raw Gemfile hosted with ❤ by GitHub

そして、bundle installを実行します。

	$ bundle install
	Fetching gem metadata from https://rubygems.org/..........
	Fetching version metadata from https://rubygems.org/...
	Fetching dependency metadata from https://rubygems.org/..
	Resolving dependencies...
	Using mime-types 2.6.2
	Using mini_portile 0.6.2
	Using nokogiri 1.6.6.2
	Using rack 1.6.4
	Using rack-test 0.6.3
	Using xpath 2.0.0
	Installing capybara 2.5.0
	Installing cliver 0.3.2
	Installing diff-lcs 1.2.5
	Installing multi_json 1.11.2
	Installing gherkin 2.12.2
	Installing websocket-extensions 0.1.2
	Installing websocket-driver 0.6.3
	Installing poltergeist 1.7.0
	Installing rspec-support 3.3.0
	Installing rspec-core 3.3.2
	Installing rspec-expectations 3.3.1
	Installing rspec-mocks 3.3.2
	Installing rspec 3.3.0
	Installing turnip 1.3.1
	Using bundler 1.8.4
	Bundle complete! 3 Gemfile dependencies, 21 gems now installed.
	Bundled gems are installed into ./vendor/bundle.

view raw make_test1.5.sh hosted with ❤ by GitHub

次に、RSpecとTurnipの設定ファイルを用意します。

	$ rspec --init
	$ echo '-r turnip/rspec' >> .rspec
	$ echo '--format d' >> .rspec

view raw make_test2.sh hosted with ❤ by GitHub

spec/turnip_helper.rbを作ります。

	require 'turnip/capybara'
	require 'capybara/poltergeist'
	Capybara.default_driver = :poltergeist
	Dir.glob("spec/**/*steps.rb") { |f| load f, true }

view raw turnip_helper.rb hosted with ❤ by GitHub

ここまででテストシナリオを作成する環境の準備が整います。

では、テストシナリオを書いていきます。
Turnipで日本語が使えるようになっていますので、日本語で書いていきます。
簡単な例として、Googleにアクセスして、キーワードTurnipで検索し、その結果をsnapshotに取るというシナリオを作ってみます。

シナリオはfeatureファイルに記述します。
spec/features/google_search.featureを次の内容で作りました。

	# encoding: utf-8
	# language: ja
	機能: Googleの検索テスト
	シナリオ: Googleで検索を実行してスナップショットを取る
	前提 Googleにアクセスする
	もし Googleのトップページを表示する
	ならば Googleと表示されている
	かつ 検索キーワードにTurnipを入力する
	かつ Google 検索ボタンをクリックする
	ならば カブと表示されている

view raw google_search.feature hosted with ❤ by GitHub

シナリオに呼応するstepファイルを記述します。ファイルの命名規則に注意してください。spec/turnip_helper.rbのDir.glob()で指定したパスにマッチするように作ります。
spec/steps/google_search_steps.rb

	# encoding: utf-8
	step "Googleにアクセスする" do
	Capybara.app_host = "http://www.google.com"
	end
	step "Googleのトップページを表示する" do
	visit '/'
	end
	step "検索キーワードにTurnipを入力する" do
	fill_in "q", with: "Turnip"
	end
	step "Google 検索ボタンをクリックする" do
	click_on "Google 検索"
	end
	step %(:textと表示されている) do |text|
	expect(page).to have_content(text)
	page.save_screenshot(
	File.expand_path("./snapshot/snap-#{text}.png"), full:true
	)
	end

view raw google_search_steps.rb hosted with ❤ by GitHub

テストが出来上がったので実行します。実行前にスナップショットを保存するディレクトリを mkdir snapshot で作っておきます。

$ rspec

view raw make_test3.sh hosted with ❤ by GitHub

無事にテストが通れば次のようになります。

	Googleの検索テスト
	Googleで検索を実行してスナップショットを取る
	前提Googleにアクセスする -> もしGoogleのトップページを表示する -> ならばGoogleと表示されている -> かつ検索キーワードにTurnipを入力する -> かつGoogle 検索ボタンをクリックする -> ならばカブと表示されている
	Finished in 4.73 seconds (files took 1.02 seconds to load)
	1 example, 0 failures

view raw make_test4.sh hosted with ❤ by GitHub

スナップショットも作成されています。

	$ ls -la snapshot/
	total 1488
	drwxr-xr-x 4 shinchi staff 136 11 7 19:47 .
	drwxr-xr-x 11 shinchi staff 374 11 7 19:47 ..
	-rw-r--r-- 1 shinchi staff 50456 11 7 19:47 snap-Google.png
	-rw-r--r-- 1 shinchi staff 705831 11 7 19:47 snap-カブ.png

view raw make_test5.sh hosted with ❤ by GitHub

stepで使える操作は
Ruby - 使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - Qiita
がわかりやすくまとまっています。

参考：
　turnipを使ってシナリオテストを自動化 | Yuichi Takada