Hack Your Design!

Rails E2EテストでpoltergeistからHeadless Chromeへ乗り換える

(image)Rails E2EテストでpoltergeistからHeadless Chromeへ乗り換える

RailsのCapybaraを使ったE2Eテスト(feature spec)をこの度、poltergeistからHeadless Chromeに乗り換えてみたのでそのときのメモ。

対応 Pull Request

今回対応したPull Requestはこちら。

Use headless Chrome instead of PhantomJS(poltergeist) by toshimaru · Pull Request #211 · toshimaru/RailsTwitterClone · GitHub

思ったよりも差分はコンパクトにまとまった。

Install selenium-webdriver

まずはpoltergeist gemの代わりに、selenium-webdriverをインストール。

-  gem "poltergeist"
+  gem "selenium-webdriver"

Change Capybara.javascript_driver

次にCapybara.javascript_driver:poltergeistから:selenium_chrome_headlessに変更。

- require "capybara/poltergeist"
- Capybara.javascript_driver = :poltergeist
+ require "selenium-webdriver"
+ Capybara.javascript_driver = :selenium_chrome_headless

ちなみに:selenium_chrome_headlessの設定は下記の変更の中でcapybara内に取り込まれている。

Capybara.register_driver :selenium_chrome_headless do |app|
  browser_options = ::Selenium::WebDriver::Chrome::Options.new()
  browser_options.args << '--headless'
  browser_options.args << '--disable-gpu'
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: browser_options)
end

via. add default selenium chrome driver registrations · teamcapybara/capybara@0275eab · GitHub

Install chromedriver

On Mac

chromedriverが必要になってくるが、Macの場合はbrewで入れちゃうのが一番ラク。

$ brew cask install chromedriver
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/cask).
No changes to formulae.

==> Satisfying dependencies
==> Downloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_mac64.zip
######################################################################## 100.0%
==> Verifying checksum for Cask chromedriver
==> Installing Cask chromedriver
==> Extracting nested container chromedriver
==> Linking Binary 'chromedriver' to '/usr/local/bin/chromedriver'.
🍺  chromedriver was successfully installed!

注意事項

  • brew install chromedriverではinstallできないので注意(ちょっと古いやり方)。
  • chromedriver-helper gemが入っているとうまく動かない場合があるので注意。

On CircleCI

CircleCI上では、ruby:x.x-node-browsersのCircleCI公式Ruby Dokcer Imageを使っていればきちんと動作しました。

  docker:
    - image: circleci/ruby:2.5-node-browsers

上記の設定の場合、Ruby2.5のnode-browsersバージョンをベースイメージとして使用している。

On TravisCI

これが今回の対応で一番ハマった設定でした。いろいろ試しましたが下記のエラーがなかなか解決できませんでした。

Failures:

  1) Authentication authorization screenshot
     Failure/Error: before { visit signin_path }

     Selenium::WebDriver::Error::WebDriverError:
        Unable to find Mozilla geckodriver. Please download the server from https://github.com/mozilla/geckodriver/releases and place it somewhere on your PATH. More info at https://developer.mozilla.org/en-US/docs/Mozilla/QA/Marionette/WebDriver.
     # ./spec/features/authentication_pages_spec.rb:9:in `block (3 levels) in <top (required)>'

本当はsudo: falseの設定で動かしたかったのですがそれだと上手くいかなかったのでsudoで起動させてchromium-chromedriverをテスト前にInstallしてパスを通すという方法でテストを通しました。

sudo: required
language: ruby
before_install:
  - sudo apt-get install -y chromium-chromedriver
  - ln -s /usr/lib/chromium-browser/chromedriver ~/bin/chromedriver

(もう少しスマートなやり方をご存知の方は教えていただけると嬉しいです🙏)

参考リンク

  • このエントリーをはてなブックマークに追加
comments powered by Disqus