Capybara + RSpec + Chrome headlessによるE2Eテスト[Rails]

Ruby on Railsのアプリケーションで「Capybara」 + RSpec環境でヘッドレスChromeを使ってE2E(エンドツーエンド)のブラウザテストをするための手順です。ついでにCapybaraのチートシートと、RSpec以外でCapybaraを使う手順を書いておきます。

🍄 環境構築

macOSの場合はChrome WebDriverをインストールします。

brew install chromedriver

プロジェクト直下のGemfileに以下を追加して、bundle installを実行。

group :test do
   gem 'rspec-rails'

   # E2E TEST
   gem 'capybara', require: false
   gem 'selenium-webdriver', require: false
 end

spec/supports/capybara.rbを追加して以下を記入。

require 'capybara/rspec'
require 'selenium-webdriver'

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.register_driver :headless_chrome do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { args: %w[headless disable-gpu] }
  )

  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome,
    desired_capabilities: capabilities
  )
end

Capybara.javascript_driver = :headless_chrome

rails_helper.rbにspec/supports/capybara.rbを読み込む設定を追加。

require 'supports/capybara'

😸 テスト

テストは次のように記述します。

require 'rails_helper'

RSpec.describe 'show sell information', type: :feature, js: true do
  before do
    # prepare data
  end
  let!(:article) { create(:article) }

  scenario 'Go to product pageaaa from top page ' do
    visit '/'
    click_on article.title
    expect(page.current_path).to eq "/articles/#{article.id}"
  end
end

これだけでテストの際にヘッドレスのChromeが立ち上がってテストを実施できます。

🎉 Capybaraチートシート

Click系

# Click button by id, text, title or alt of img tag
click_button('button text')

# Click link by id, text, title or alt of img tag
click_link('link text')

# Click button or link
click_on('button or link text')

フォームの記入

# Set text to text tag by id, name or label text
fill_in('some text', with: 'text_tag_selector')

# Select pulldown by id, name or label text
select('some option', with: 'select_tag_selctor')

# Select checkbox by id, name or label text
check('checkbox_selector')

# Deselect checkbox by id, name or label text
uncheck('checkbox_selector')

# Choose radio button by id, name or label text
choose('yes')

# Attach file
attach_file('attach_file_selector', '/path/to/dog.jpg')

要素の検索

# Find element by css
find(:css, 'css selector', options)

# Find element by xpath
find(:xpath, 'xpath value', option)

# Set some text to some input form
find(:xpath, 'some xpath').set('some text')

# Show text in the element
find('id_selector', visible: false).text

# Show value in the element
find_field('id_selector').value

# Check checkbox
find('checkbox_selector').checked?

# Check Selectbox
find('select_tag_selctor').selected?

# Check Visibility
find('a', text: 'next').visible?

クエリ処理

# Check existance of the element by css
expect(page).to have_css('#something')

# Check existance of the element by xpath
expect(page).to has_xpath('#something')

# Check existance of the element by content
expect(page).to has_content('#something')

# Check no existance of the element by content
expect(page).to has_no_content('#something')

# Check no existance of title
expect(page).to has_title('#something')

スコープの設定

# Scope with xpath
within("//li[@id='example']") do
  fill_in 'Full Name', with: 'John Due'
end

# Scope with CSS
within(:css, "li#example") do
  fill_in 'Full Name', :with => 'John Due'
end

その他

# Waiting & try to check the element for 30 seconds
Capybara.using_wait_time(30) do
  expect(find('#message')).to have_text('Complete')
end

# Click alert
accept_alert do
  click_on 'Show Alert'
end

# Dismiss confirm
dismiss_confirm do
  click_on 'Delete'
end

# Execute JavaScript
execute_script 'window.scrollTo(0, 900)'

# Capture screen
save_screenshot('xxx.png')

# Debugging
save_and_open_page

英語版のCapybaraチートシートは「Ruby Capybara with selenium Cheat Sheat」です。

😎 RSpec以外でのCapybaraの利用

RSpec以外でのCapybaraの利用手順です。

require 'capybara'

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.register_driver :headless_chrome do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
      chromeOptions: { args: %w(headless disable-gpu) }
  )

  Capybara::Selenium::Driver.new(
      app,
      browser: :chrome,
      desired_capabilities: capabilities
  )
end

Capybara.javascript_driver = :headless_chrome

class CapybaraSampleClass
  include Capybara::DSL

  def sample_method
    visit 'http://example.selenium.com/'
    fill_in('name', with: 'sample user')
  end
end

sample = CapybaraSampleClass.new
sample.sample_method

$ ruby cabybara_sample.rb

🐯 参考リンク

• 使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」
• Feature spec - Feature specs - RSpec Rails
• Headless Capybara Feature Specs with Chrome
• RSpec の feature spec でヘッドレス Chrome を使う

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍