ヘッドレスドライバを使わないとCIだけJavaScriptのテストが通らない(RSpec)

f:id:ryoutaku_jo:20190820001908p:plain

【結論】

JavaScriptの操作を伴うテストを実行する場合、ブラウザシュミレータ(ドライバ)を使う必要がある

・デフォルトのドライバではテスト実行中にブラウザのウィンドウが開くが、これはCircleCIなどの継続的インテグレーション環境では実行できない

・CI環境で実行する場合は、画面が起動しないヘッドレスドライバを用いる必要がある

【目次】

【本題】

JavaScriptの操作を伴うテストを実行する

RSpecsystem 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

ヘッドレス Chrome ことはじめ  |  Web  |  Google Developers

GitHub - willnet/capybara-readme-ja: Capybara の README 和訳

Add headless chrome driver to System Tests · rails/rails@ada0585 · GitHub

Circle CIでHeadless Chrome 解決編 - PIYO - Tech & Life -

《今日の学習進捗(3年以内に10000時間に向けて)》

・LP機能のテストコード修正
CIだけでテストが通らなかった問題が発生していたが、ヘッドレスブラウザでテストを実行する様に変更したことで改善した。
ヘッドレスブラウザの導入については、参考にしていた技術書のコードが古いバージョンの内容だったので、ハマってしまった。
技術書を参照する際は、最新情報との差分が無いか注意することを改めて心掛けたい。

SQL
CSV出力機能のレビューを行っているが、SQLの知識が乏しい為、コードの品質面でのレビューが十分に行うことが出来なかった。
SQLに関してはバックエンドの業務を遂行する上で、避けては通れない技術の一つの為、早急にキャッチアップしていきたい。

インフラや自然言語処理など、他にも業務遂行の為にキャッチアップすべき技術が多岐に渡り、どれから手を出すべきか判断に迷う場面が増えて来たが、CTOにアドバイス頂いた様に、直近の業務で課題に感じたものから優先的に潰していきたい。

学習開始からの期間 :255日
今日までの合計時間:2410h
一日あたりの平均学習時間:9.5h
今日までに到達すべき目標時間:2329h
目標との解離:81h
「10,000時間」まで、

残り・・・「7590時間!」