LoginSignup
49

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-13

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

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
49