Rails で Playwright が公式にサポートされたので RSpec 経由で使ってみた
こんにちは、エンジニアリングマネージャーの山口（@yamat47）です。
Beta1 が 9 月 13 日にリリースされ、段々と Rails 7.1 の足音が聴こえはじめましたね。rails new した際の設定をもとに Dockerfile を生成してくれるようになったり、ActiveRecord で非同期クエリのサポート範囲が広がったりと、今回も様々な進化を遂げています。（目玉機能こそないものの）開発者への支援がより強化されるリリースになりそうで、いまからとても楽しみです。
さて、最近の Rails 関連の話題の一つに「システムテストにおける Playwright の公式サポート」があります。これまでも内部的なインターフェースを用いて細かい設定をすれば動かせましたが、これが Selenium を利用したテストと同様にとても簡単に動かせるようになりました。
プルリクエストがマージされたのが最近ということで Rails 7.1 Beta1 には入っていませんが、main ブランチを指定すればこの変更が試せます。そこで本記事では、Scaffold で作った簡単な Rails アプリケーションに対して Playwright を使った自動テストを動かしてみます。私の好みの問題で、Minitest ではなく RSpec を利用しています。
そもそも Playwright って？
Playwright とはブラウザの自動操作ツールのひとつです。同様のツールに Selenium や Cuprite などがありますが、後発ということもあってより高機能で便利です。Playwright Inspector などの周辺ツールも含めて強力で、ここ最近の E2E テストでは選ばれることが多い印象です。
Ruby では Capybara というライブラリを経由して自動操作ツールを呼び出すことが多いです。この辺りのエコシステムについては Playwright の Ruby クライアントを開発してくださっている Yusuke Iwaki さん（@yi01imagination）のスライドがわかりやすいです。
Rails で Playwright をつかった E2E テストを動かしてみる
Gem のインストール
まずは必要なライブラリをインストールします。
Rails は main ブランチを指定しつつ、Playwright を動かすために必要なライブラリを導入します。
gem "rails", github: "rails/rails", branch: "main"
group :development, :test do
gem 'rspec-rails'
end
group :test do
gem "capybara"
gem 'capybara-playwright-driver'
gem 'playwright-ruby-client'
end※重要な部分のみ抜粋
最終的な Gemfile はこちら:
Playwright の初期設定
Playwright が利用するブラウザをインストールする必要があります。最近の Rails はデフォルトで package.json を作らなくなっているため、npx を使ってインストールのためのコマンドを直接実行しました。
npx playwright installScaffold でアプリを作りつつ、E2E テストを作る
今回のテスト対象のアプリとして、シンプルなユーザー情報の管理ツールを作成しました。Scaffold を使って作った、非常にシンプルなアプリです。
また、このアプリの E2E テストとして RSpec の system specs を作りました。「ユーザーの登録」「ユーザーの更新」「ユーザーの削除」の３つのケースを検証しています：
require 'rails_helper'
RSpec.describe "Users", type: :system do
# この他にユーザーの更新や削除のケースも検証しています。
describe "User can create a new user" do
specify do
visit users_path
expect(page).to have_text("Users")
click_on "New user"
expect(page).to have_text("New user")
fill_in "Name", with: "Sample User"
fill_in "Email", with: "sample-user@example.com"
fill_in "Password", with: "password"
fill_in "Password confirmation", with: "password"
click_on "Create User"
expect(page).to have_text("User was successfully created.")
expect(page).to have_text("Sample User")
expect(page).to have_text("sample-user@example.com")
expect(page).not_to have_text("password")
end
end
end Playwright を使って自動テストを動かす設定をする
ここが今回の本題です。Rails が Playwright をサポートしたことで、driven_by を用いて指定することができます。
例えば DRIVER という環境変数に応じてテストに用いるブラウザを切り替えたい場合はこのような実装になります：
before do
# NOTE: specify the driver name by setting the DRIVER environment variable
case ENV.fetch("DRIVER", "rack_test")
when "playwright_chromium"
driven_by(:playwright, options: { headless: false, browser_type: :chromium })
when "playwright_firefox"
driven_by(:playwright, options: { headless: false, browser_type: :firefox })
when "playwright_webkit"
driven_by(:playwright, options: { headless: false, browser_type: :webkit })
else
raise "Invalid DRIVER: #{driver}"
end
endこれで準備完了です。
実際に自動テストを動かしてみた様子がこちらです：
Playwright を用いるための設定の勘所
先ほどの設定でもすでに使われていましたが、よく使いそうなオプションとして headless と browser_type のふたつがあります。
headless
headless はブラウザをヘッドレスで起動するかどうかの設定です。デフォルトで有効であり、指定しなかった場合にはヘッドレスで起動します。
定義場所はこちら：
browser_type
browser_type は起動するブラウザの種類を表す設定です。:chromium、:firefox、:webkit の三種類がサポートされていて、npx playwright install さえしていれば追加のライブラリなしにすべて利用できます。
定義場所はこちら：
参考：ソースコードは GitHub にて公開しています
実際に試したソースコードは GitHub にて公開しています。記事でご紹介したコード以外にも、テストケースを増やしていたり Rack や Selenium でも自動テストを動かせるようにしています。あわせてご確認ください
まとめ
本記事では、最新の Rails でサポートされるようになった Playwright を使って実際に E2E テストを作ってみました。紹介したコード以外にも Playwright が提供するインターフェースを直接利用することもでき、より保守のしやすい E2E テストを作ることができそうです。
ワンキャリアでは Ruby on Rails が大好きなエンジニアを大募集しています。少しでも興味を持ってくださった皆様、ぜひ私とカジュアル面談でお話をしましょう！
▼ワンキャリアのエンジニア組織のことを知りたい方はまずこちら
▼カジュアル面談を希望の方はこちら
▼エンジニア求人票