Rails アプリに E2E テストを導入する（技術選定編）

E2E テストを導入するにあたり、技術選定で調べたことをまとめてみました

とりうる選択肢とそれぞれの特徴

1. System Spec 経由で Capybara を使い Selenium をドライバーとして動かす
   • System Spec 自体が RSpec に組み込まれており、かつ Selenium が Capybara のデフォルトのJSドライバーなので rails で E2E テストをする場合の標準的なテストスタックと言える。rspec と統一された設定、環境で E2E テストが行える
2. System Spec 経由で Capybara を使い Playwright をドライバーとして動かす
   • Selenium をドライバーとして使った場合、テストが正常に実行されない場合があるので、その点を解消したい場合はこちら。Rails 7.1 であれば Playwright 用の設定が組み込まれているので gem をインストールすればそのまま使えるが、Rails 7.0 以前でも設定を追加すれば使える
3. Capybara を直接動かす
   • 詳細な設定や Sinatra など rails 以外のフレームワークを使いたい場合。テストの統一感が失われるので特別な要件がなければ採用する理由はなさそう
4. Selenium WebDriver を直接動かす
   • 直接的なブラウザ操作を行う。あえて採用する必要はなさそう
5. Playwright を直接動かす
   • Playwright の詳細な設定がしたい場合。Playwright の扱いに慣れている場合はいいかもしれない

弊社ではまだナレッジが乏しいので「System Spec 経由で Capybara を使い Selenium をドライバーとして動かす」というベーシックな手段を採用し、問題が生じた場合Playwright の採用も検討する方向性としました

そもそも System Spec/Capybara/Playwright とはなにか

• System Spec は RSpec に組み込まれた E2E テストを実施するためのフレームワークで Capybara の機能を「ラップ」して、Rails のテスト環境に適した形で提供する。Capybara に依存しているので 他のライブラリを使う選択肢はない。
• Capybara は ウェブアプリケーションの E2E テストのために設計された Ruby ライブラリで、 Selenium などドライバーを利用してブラウザ操作をシュミレートする
• Playwright は Node.js 環境で動作する Microsoft が開発した E2E テストフレームワーク。類似のものとしては Selenium が有名。Capybara の設定により、ブラウザ操作のドライバーとして利用できる

Selenium vs Playwright

JS が必要な場合の Capybara のドライバーの選択肢として Selenium と Playwright がある（JS が不要なケースの場合はデフォルトの Rack::Test JS を使う）
それぞれメリットデメリットあるが、ドライバのスイッチングコストは低い（設定ファイルのドライバの指定を変えるだけ）のでどちらかを試してみて、問題が生じたら切り替えるのが良さそう

• Selenium
  採用実績として多いのでこちらの方がとっつきやすそう。
  デメリットとしては 動作が Flaky で、テストが正常に実行されない（CI で時折よくわからない理由で落ち、 更に何故落ちたかの再現や調査が難しい）場合がある

• Playwright
  node ベースで動作する最近勢いのある E2E テストライブラリ。実行が高速。動作の安定性が高く、selenium から切り替えてテスト結果が安定したという情報が多く出てくる
  デメリットとしては採用実績が selenium と比べると少なく、capybara-playwright-driver という Capybara を使って Playwright を動かすための gem を使うことになるが、小規模な PJ のため運用面が少し不安

導入編

実際の導入手順は以下記事に記載しております
Rails+M1 Mac+Docker環境にSystem Specを導入する

参考になったもの

いつも皆様のアウトプットに助けられております。ありがとうございます

• E2E testing on Rails 2023
  • capybara-playwright-driver 開発者の方の登壇動画
• Capybara で変更に強い E2E テストを書く
  • E2E テストを書く上で意識した方がいいポイントについての解説
• Rails で Playwright が公式にサポートされたので RSpec 経由で使ってみた
  • Rails で Playwright を使う方法について
• Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った
  • Rails で Playwright を使う方法について
• 【RSpec】System Spec が動作する Rails+Docker 開発環境を構築する
  • docker 上で System Spec を実行するための環境構築手順
• Docker + Rails 7 + RSpec で System Spec を実行するための設定
  • docker 上で System Spec を実行する際のハマりどころ
• Playwright のインストール方法と使い方
  • Playwright を直接動かす場合の手順について