ヘッドレスドライバを使わないとCIだけJavaScriptのテストが通らない（RSpec）
【結論】
・JavaScriptの操作を伴うテストを実行する場合、ブラウザシュミレータ（ドライバ）を使う必要がある
・デフォルトのドライバではテスト実行中にブラウザのウィンドウが開くが、これはCircleCIなどの継続的インテグレーション環境では実行できない
・CI環境で実行する場合は、画面が起動しないヘッドレスドライバを用いる必要がある
【目次】
【本題】
JavaScriptの操作を伴うテストを実行する
RSpecのsystem specでは、画面の状態をチェックするE2Eテストを実行することが出来ます。
また、`js:trueというオプションをテストに渡すと、JavaScriptの操作を伴うテストにも対応できます。
現行バージョン（rspec-rails (3.8.2) ）のデフォルトでは、ChromeDriverを使ってテストを実行するように指示を出します。
ChromeDriverを使うと、テスト実行時にウィンドウが開き、その中で操作のシュミレーションが行われます。
しかしCircleCIなどの継続的インテグレーション環境では、この方法は実行できずエラーになってしまいます。
これにより、ローカル環境ではテストをパスするが、CIではテストが通らない事象が発生する場合があります。
これを回避するには、ヘッドレスドライバを利用する必要があります。
ヘッドレスドライバは、画面操作のシュミレーションを、画面を起動せずにCLI（コマンドラインイターフェイス）上で実行します。
Chromeのヘッドレスモードを使用する方法
※環境
rails (5.2.2)
rspec-rails (3.8.2)
capybara (3.13.2)
selenium-webdriver (3.141.0)
webdrivers (3.7.1)
ChromeDriver (76)
上記の環境でChromeのヘッドレスモードを使用する場合は、rails_helper.rbに以下の記述を行います。
RSpec.configure do |config| # ... config.before(:each, type: :system, js: true) do driven_by :selenium, using: :headless_chrome, screen_size: [1920, 1080] end end
これでCIでもJavaScriptを使ったテストが実行できる様になります。
参考情報
rspec-rails 3.7の新機能！System Specを使ってみた - Qiita
サポートが終了したchromedriver-helperからwebdrivers gemに移行する手順 - Qiita
GitHub - titusfortner/webdrivers: Keep your Selenium WebDrivers updated automatically
Getting Started with Headless Chrome - Chrome Developers
GitHub - willnet/capybara-readme-ja: Capybara の README 和訳
Add headless chrome driver to System Tests · rails/rails@ada0585 · GitHub
