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.rbspec/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

🐯 参考リンク

🖥 VULTRおすすめ

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

📚 おすすめの書籍