Capybara RSpec turnipを使ってエンドツーエンドテストをする

実行環境

Mac OSX 10.9.4

使うツール & gem

1. Capybara
2. RSpec
3. Turnip
4. Selenium

動かすまでに困った事

Xcodeのコマンドラインツールが古くてbundle installが失敗

// コマンドラインツールをインストール
$ xcode-select --install

テスト内容

example.comにアクセスして、HTMLに「Example Domain」という文字列が含まれていればテスト成功

必要なgemをインストール

Gemfile

source "https://rubygems.org"

gem 'rake', '10.4.0' # rakeコマンド使ってテスト実行したい人
gem 'rspec', '~> 3.2.0'
gem 'capybara', '2.4.4' # テストフレームワーク
gem 'capybara-webkit' # capybaraでjsをテスト可能にする
gem 'poltergeist', '1.5.1'
gem 'turnip' # 日本語でテストケース記述できる粋なやつ
gem 'selenium-webdriver'

実行 bundle install --path vendor/bundle

specファイルを作成

bundle exec rspec --init

.rspec

--color
-r turnip/rspec

spec/spec_helper

require 'rubygems'
require 'bundler/setup'
require 'rspec'
require 'capybara'
require 'capybara/webkit'
require 'capybara/rspec'
require 'capybara/poltergeist'
require 'turnip'
require 'turnip/capybara'
require 'selenium/webdriver'

RSpec.configure do |config|
end

Capybara.register_driver :selenium do |app|
  profile = Selenium::WebDriver::Firefox::Profile.new
  ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25'
  profile["general.useragent.override"] = ua
  opts = { browser: :firefox, profile: profile }
  Capybara::Selenium::Driver.new app, opts
end

if (ENV['TARGET'].nil? || ENV['TARGET'] != 'poltergeist')
  Capybara.default_driver = :selenium
else
  Capybara.default_driver    = :poltergeist
  Capybara.javascript_driver = :poltergeist
end

Dir.glob("spec/**/*steps.rb") { |f| load f, true }

テストケースのフューチャーを作成

featureとは日本語あるいは自然言語などのエンジニアではない人が見ても理解出来るレベルでのテストケースを作成 テストの中身はstepsの項目にて記述

spec/features ディレクトリを作成

spec/features/example.feature

# encoding: utf-8
# language: ja
機能: ポータル画面からログイン
  シナリオ: トップページにアクセスしてログインする
    前提 hoge サイトにアクセスする
    もしトップページを表示する
    ならば 画面にExample Domainと表示されていること

featuresで作成したテストケースの内容を作成

spec/steps ディレクトリを作成

spec/steps/example_steps.rb

# encoding: utf-8

step 'hoge サイトにアクセスする' do
  Capybara.app_host = "http://example.com"
end

step 'トップページを表示する' do
  visit '/'
end

step '画面にExample Domainと表示されていること' do
  expect(page).to have_content('Example Domain')
end

実行

# seleniumで実行
TARGET=selenium bundle exec rspec
# poltergeistで実行
TARGET=poltergeist bundle exec rspec

完成品はこちら

https://github.com/kkyouhei/my-e2e-test