Cucumberからwebdriversのgemを使ってブラウザテストを実行する

chromedriver-helper が deprecated になって久しいので、いい加減 webdrivers に切り替えてみる。

RSpec の SystemSpec から webdrivers を使う例はよくみるけど、
cucumber から使う例は自分で探した限りあまり無かったので改めて書き留めておくなど。

前提

• CentOS 7 で実験した手順です
• Ruby 2.6.4 を使用します

手順

1. 依存ライブラリをインストールしておく

もしインストールされていない場合はgoogle chromeとIPAフォントをインストールします

sudo tee /etc/yum.repos.d/google-chrome.repo <<'EOS'
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
EOS

sudo yum install -y google-chrome-stable ipa-*-fonts

2. Gemfileにwebdriversを追加します

Gemfile

# ----- 前略 -----
gem 'webdrivers'
gem 'cucumber' # Railsプロジェクトの場合は 'cucumber-rails' を使用する
gem 'capybara'
# ----- 後略 -----

• selenium-webdriver や chromedriver-helper はもう記述する必要はありません（ selenium-webdriver は webdrivers によってインストールされます)

3. bundle install を実行する

4. env.rb に設定を記述する

features/support/env.rb

require 'capybara/cucumber'
require 'webdrivers'

Capybara.configure do |config|
  config.default_driver    = :selenium_chrome_headless
  config.javascript_driver = :selenium_chrome_headless

  # Rails以外のアプリを試験する場合や、環境も含めたE2Eテストを実施する場合、下記の２行指定する必要がある
  # (直接Railsアプリを試験する場合は下記の２行は不要)
  config.app               = nil   
  config.run_server        = false
end

• env.rb を汚したくない場合は features/support/webdrivers.rb 等のファイル名で作成してください
• :selenium_chrome_headless は capybara が準備しているドライバの１つ（https://github.com/teamcapybara/capybara/blob/3.29.0/lib/capybara/registrations/drivers.rb#L27-L36 )です。まだ更新される余地がありそうなので、自前で Capybara.register_driver はせずにこのまま活用します

以上でインストールと設定は完了です。
stepやfeatureはこれまで通り使えますが、CapybaraやWebDriverに直接オプションを指定している場合は動かないケースもありますので、その場合はオプションの指定を外してください。

おまけ１：画面サイズの変更

ブラウザの画面サイズを変更する場合、SystemSpecでは driver_forのオプションでscreen_sizeを渡したり、Capybara.register_driver でオプションを指定して設定する場合もあります。

ただしこの場合、cucumberでは画面サイズ毎にoptionを指定したドライバを Capybara.register_driver し、step内でcurrent_driverを差し替えながら試験を進めないといけなくなります。

それよりは下記の方がLGTM(Looks Good to Me)です。

stepファイル

When("ブラウザのウィンドウを {int}px × {int}px にリサイズする") do |width, height|
  page.driver.browser.manage.window.resize_to(width, height)
end

featureファイル

シナリオ: WebDrivers経由で画面表示をしスクリーンショットを撮る
  もし "https://google.com"を表示する
  かつ ブラウザのウィンドウを 1000px × 600px にリサイズする
  # 後略

おまけ２：スクリーンショットを撮る

webdrivers経由でChromeを呼び出しても、これまで通りスクリーンショットは撮ることができます

stepファイル

Then("スクリーンショットを撮って{string}に保存する") do |file_path|
  page.save_screenshot "tmp/#{file_path}"
end

featureファイル

* スクリーンショットを撮って"screen_shot.png"に保存する

参考

これらのファイルはここで公開しています。参考になれば。