Edited at

【Rails】Turnip + RSpec + Capybara + Selenium でエンドツーエンドテスト

More than 3 years have passed since last update.

RailsでTurnip + RSpec + Capybara + Seleniumを使ってエンドツーエンドテストを書いていこうと始めてみたので方法をメモしてみます。

今回はエンドツーエンドテストをして失敗したところや詳しくテストしていきたいところに関してユニットテストを書いていく感じにしようと思ってます。

64e2ae34-63f4-490a-8c8d-a5dc557509d5.png

Turnipでシナリオを作成して、RSpec,Capybaraで実際にブラウザを操作しながらテストしてく感じだと思います。その際Capybaraでスクリーンショット撮ったりしながら進めます。


設定

まずは今回使用したgemたちです。


Gemfile

group :development, :test do

gem 'rspec-rails', '~> 3.1.0'
gem 'factory_girl_rails', '~> 4.4.1'
gem 'capybara', '~> 2.4.3'
gem 'selenium-webdriver'
gem 'turnip'
end

bundle

rails g rspec:install # rspecのインストール

.rspecに以下を追加します。


.rspec

-r turnip/rspec


spec_helper.rbに以下を追加します。


spec_helper.rb

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

require 'capybara/dsl'
require 'capybara/rspec'
require 'turnip'
require 'turnip/capybara'

Capybara.default_driver = :selenium
Capybara.ignore_hidden_elements = true
Capybara.run_server = false

# Chrome
Capybara.register_driver :selenium do |app|
Capybara::Selenium::Driver.new(app, browser: :chrome)
end


specディレクトリ配下に以下のディレクトリを作成します。

spec/features  # .featureファイル置き場

spec/steps # steps.rbファイル置き場

selenium用にchromeドライバをインストールします。

chromedriverをダウンロード)してきます。

sudo mv ~/Downloads/chromedriver /usr/bin/

ここまでで準備は完了です。


サンプル

ディレクトリ構成

spec/features/login.feature

spec/steps/login_steps.rb


login.feature

# encoding: utf-8

# language: ja
機能: ログイン画面からログイン
シナリオ: ログイン画面にアクセスしてログインする
前提 hogehogeにアクセスする
もし ログイン画面を表示する
ならば ログイン画面が表示されていること
かつ emailとpasswordを入力する
かつ ログインボタンをクリックする
ならば 画面に username が表示されること


login_steps.rb

# coding: utf-8

require 'rails_helper'

step 'hogehogeにアクセスする' do
Capybara.app_host = 'http://localhost:3000/'
end

step 'ログイン画面を表示する' do
visit 'http://localhost:3000/users/sign_in'
page.save_screenshot 'spec/tmp/screenshots/login/page.png'
end

step 'システムログインが表示されていること' do
expect(page).to have_content 'システムログイン'

end

step 'emailとpasswordを入力する' do
fill_in 'user[email]', with: 'exapmle@hogehoge.com'
fill_in 'user[password]', with: 'hogehoge'
page.save_screenshot 'spec/tmp/screenshots/login/input.png'
end

step 'ログインボタンをクリックする' do
click_on 'ログイン'
end

step "画面に :user が表示されること" do |user|
expect(page).to have_content (user)
page.save_screenshot 'spec/tmp/screenshots/login/success.png'
end



参考

Rails - Selenium(Capybara)でChromeを使う - Qiita

http://qiita.com/quattro_4/items/561c145fcbca28718ac7

Rubyist Magazine - エンドツーエンドテストの自動化は Cucumber から Turnip へ

http://magazine.rubyist.net/?0042-FromCucumberToTurnip#l36

Amazon.co.jp: Ruby徹底攻略 (WEB+DB PRESS plus): 角 征典, 成瀬 ゆい, そらは(福森 匠大), 田中 哲, 笹田 耕一, 村田 賢太, まつもと ゆきひろ, 松田 明, 後藤 大輔, 浦嶌 啓太, 高橋 健一, 柴田 博志, 近藤 宇智朗, 大和田 純, 白土 慧, 原 悠(yhara), 伊藤 直也, WEB+DB PRESS編集部: 本

http://www.amazon.co.jp/Ruby%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-WEB-DB-PRESS-plus/dp/4774165344