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

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

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

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: '[e-mail]'
  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