Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
49
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
49
Help us understand the problem. What are the problem?