2019年7月現在、SystemSpecを導入する際に行った手順をまとめた。

必要なバージョン

  • rails 5.1以上
  • rspec-rails 3.7以上

chromedriver-helperはサポート終了

これまではchromedriver-helperを使ってきたが、サポートが終了したようなので今後はwebdriversを使う。

サポートが終了したchromedriver-helperからwebdrivers gemに移行する手順

Gemfile

group :test do
  gem 'rspec-rails'
  gem 'capybara'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

Gemfileの編集ができたらbundle install。

既にインストールされているものがあり、バージョンが古い場合はupdateしておく。

$ bundle update rspec-rails

設定を追加

$ mkdir spec/support
$ touch spec/support/capybara.rb

capybara.rb

Capybara.register_driver :headless_chrome do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: {
      args: %w[headless disable-gpu window-size=1400,1400]
    }
  )
  Capybara::Selenium::Driver.new(app, browser: :chrome, desired_capabilities: capabilities)
end

RSpec.configure do |config|
  config.before(:each, type: :system, js: true) do
    driven_by :headless_chrome
  end
end

Capybara.javascript_driver = :headless_chrome

specの追加

$ mkdir spec/system
$ touch spec/system/top_page_spec.rb

top_page_spec.rb

ここでは簡単なサンプルとして、「トップページにサイト名が表示されているか」を確認する。

require 'rails_helper'

describe 'TopPage', type: :system, js: true do
  it 'サイト名が表示されていること' do
    visit root_path

    expect(page).to have_content 'サイト名'
  end
end

実行

$ bundle exec rspec spec/system/top_page_spec.rb