はじめに
paiza株式会社の小野です。
Rails 7.1から、システムテストでPlaywrightがサポートされるようになりました。
つい先日にはRails 7.2系もリリースされたタイミングではありますが、公式にサポートされる以前のRails 7.0系環境でfeature specのブラウザドライバをSeleniumからPlaywrightに切り替える機会があったので、やったことをまとめてみようと思います。
移行のメリットについては他にも多数の情報が公開されています（一部を参考文献として後述します）ので、この記事では具体的な手順にフォーカスします。
依存パッケージの導入
playwright-ruby-clientとcapybara-playwright-driverを合わせて利用することで、Capybara越しにPlaywrightを利用することができます。
詳細は以下のplaywright-ruby-clientのドキュメントで説明されています。
# テスト時のみ利用するはずなので、require: falseを指定
gem 'capybara-playwright-driver', require: false
gem 'playwright-ruby-client', require: false
bundle install
npm install playwright -D # package.jsonで管理するため、ここではnpxではなくnpm installを利用
./node_modules/.bin/playwright install
Railsアプリ側の設定（Capybaraドライバの設定）
Capybaraの設定ファイルにPlaywrightを利用するドライバを設定します。
Capybara.register_driver(:playwright) do |app|
Capybara::Playwright::Driver.new(
app,
browser_type: :chromium, # 利用するブラウザの指定
headless: true, # ヘッドレスモードで実行するかどうかの指定
playwright_cli_executable_path: 'node_modules/.bin/playwright', # Playwrightのインストール先を指定
)
end
Capybara.default_max_wait_time = 15 # Capybaraのデフォルトタイムアウト時間は2秒なので、長めに設定
Capybara.javascript_driver = :playwright # JavaScriptコンテンツのテストにもPlaywrightを利用したい場合は指定
feature specの修正
この段階で、Playwrightを利用してfeature specを動かせるようになります。
ほぼ全てのテストがSelenium時代のままの記述で通りましたが、一部のテストが失敗したため個別に確認して修正しました。
（ちなみに今回はfeature specのテストケースが1100件程度あったのですが、修正が必要だったのは2ケースのみでした。）
Capybara::Playwright::Driver.new時のオプションをheadless: falseにすることでブラウザの実挙動を確認しつつ修正したのですが、Seleniumを利用していた時と比べてキビキビ動作していてスムーズに修正できました。
まとめ
今回の対応ではかなりライトにfeature specのブラウザドライバをPlaywrightに切り替えることができ、ひとまずテスト体験を向上させたいという場合にはコストパフォーマンスが高い対応だと感じました。
Playwright化の前後10日間でCIのfeature spec実行時間の平均を比較したところ約90%に短縮されており、導入しただけでも速度面で恩恵を受けられたようです。
Trace出力などの設定を追加していくことで、さらなる開発体験向上も図れます。
Railsバージョン自体を7.1以上にすぐに上げられる場合にはアップグレードした上でPlaywrightを利用する方が望ましいですが、すぐに踏み切れないケースにおいては有力な選択肢だと思います。
参考文献
playwright-ruby-client, capybara-playwright-driverの作者であるyusukeiwakiさんのスライドです。システムテストの概要から従来の周辺技術の課題感、開発経緯がまとめられています。
Playwrightを利用するメリットや、テスト失敗時のTrace出力方法について解説されています。
Discussion