system specでE2Eテスト

system specでE2Eテストを実施実施します。 いわゆる統合テストです。

必要なgemをインストール

まずは必要なgemをインストールします。 chromedriver-helperは2019年3月31日にサポートが終了したみたいなので、代わりにWebdriverを使用します。

(Gemfile)

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'
  gem 'webdrivers'
  gem 'launchy', '~> 2.4.3'
end

$ bundle

launchyはsave_and_open_pageで任意の場所をブラウザで開くことができる。

テストスイートに対してCapybaraを読み込む設定をします。

(spec/rails_helper.rb)

# Add additional requires below this line. Rails is not loaded until this point!
# 以下の一行を追加
require 'capybara/rspec'

テストファイルを作成します。

$ rails g rspec:system blogs

spec/system/blogs_spec.rbというファイルが作成されました。

アウトラインを作る

アウトラインを作っていきます。

(spec/system/blogs_spec.rb)

require 'rails_helper'

RSpec.describe "Blogs", type: :system do
  describe 'blog一覧画面' do
    context 'blogを作成した場合' do
      it '作成済みのblogが表示されること'
    end
  end
  describe 'blog登録画面' do
    context '必要項目を入力して、createボタンを押した場合' do
      it 'データが保存されること'
    end
  end
  describe 'blog詳細画面' do
     context '任意のblog詳細画面に遷移した場合' do
       it '該当blogの内容が表示されたページに遷移すること'
     end
  end
end

Deviseを使ってログイン状態を作る

Deviseを使っているので、ログイン状態を作ることができます。 以下のリファレンスを参考にします。

How To: Test with Capybara · heartcombo/devise Wiki · GitHub

(spec/rails_helper.rb)

include Warden::Test::Helpers

(spec/system/blogs_spec.rb)

user = FactoryBot.create(:user)
login_as(user, scope: user)

confirmダイアログの操作をする

comfirmダイアログを操作する事ができます。

page.driver.browser.switch_to.alert.accept # OKの操作
page.driver.browser.switch_to.alert.dismiss # キャンセルの操作

beforeやletを使ってDRYにする

letやbeforeを使って操作をまとめる。

(spec/system/users_spec.rb)

describe 'user編集画面' do
    let(:alice) { FactoryBot.create(:alice) }
    before do
      login_as alice, scope: :user
      visit edit_user_registration_path
    end
# （省略）