Help us understand the problem. What is going on with this article?

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

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

RSpecSystemSpec から 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-webdriverchromedriver-helper はもう記述する必要はありません( selenium-webdriverwebdrivers によってインストールされます)
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テストを実施する場合、下記の2行指定する必要がある
  # (直接Railsアプリを試験する場合は下記の2行は不要)
  config.app               = nil   
  config.run_server        = false
end

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

おまけ1:画面サイズの変更

ブラウザの画面サイズを変更する場合、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 にリサイズする
  # 後略

おまけ2:スクリーンショットを撮る

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

stepファイル
Then("スクリーンショットを撮って{string}に保存する") do |file_path|
  page.save_screenshot "tmp/#{file_path}"
end
featureファイル
* スクリーンショットを撮って"screen_shot.png"に保存する

参考

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away