sleepを使わないE2EテストのためにplaywrightをRailsに導入した話

今日は、みてねコールドクターでエンジニアマネージャーをしている遠藤です。
E2Eテストを行うために、Playwrightを導入したお話をします。

背景

これまでE2Eテストを行うにあたり、Capybara + Seleniumを使用していましたが、一部Flakyなテストが存在し、sleepを用いるなど不安定なテストが多かったため、Playwrightを導入しました。

Playwrightとは

PlaywrightはMicrosoftが開発するブラウザ操作ツールです。setTimeoutを用いずにテストするため、Auto-waiting機能が提供され、ブラウザの変更を待つための様々なAPIが用意されています。今回はこのAuto-waiting機能を利用したかったため、Playwrightを導入しました。

実装

Playwrightを導入するため、以下のようにcapybara-playwright-driverを導入します。

Gemfile

gem 'capybara-playwright-driver'

yarn add -D @playwright/test

spec/rails_helper.rb

  Capybara.register_driver(:playwright) do |app|
    channel = ENV['PLAYWRIGHT_CHROMIUM_CHANNEL'] || 'chrome'
    Capybara::Playwright::Driver.new(app, channel: channel, viewport: { width: 1400, height: 1400 })
  end

  Capybara.default_max_wait_time = 15
  Capybara.default_driver = :playwright
  Capybara.javascript_driver = :playwright

ローカル環境ではchrome、CI環境ではchromiumを使用するようにしています。

また、デフォルトではうまく起動しなかったため、以下の設定も追加しています。

spec/support/driver_setting.rb

RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by(:playwright)
  end
end

GitHub Actionsでの設定は以下の通りです。基本的にはPlaywrightをインストールするだけです。

.github/workflows/ci.yml

    env:
      PLAYWRIGHT_CHROMIUM_CHANNEL: "chromium"

    - name: Install Playwright
      run: yarn playwright install chromium

使い方

基本的には、capybaraのメソッドがそのまま使えますが、一部メソッドが使えなかったので、修正したものもあります。

• click_button → click_on
• Capybara.current_session.driver.browser.manage.window.resize_to(width, height) → Capybara.current_session.driver.resize_window_to(Capybara.current_session.driver.current_window_handle, width, height)

Auto-waiting機能を使うために、以下のように書きます。
API通信の完了を待つために、

spec/system/xxx_spec.rb

      page.driver.with_playwright_page do |page|
        page.wait_for_load_state(state: 'networkidle')
      end

モーダルの処理が完了するまで待つために、

spec/system/xxx_spec.rb

      page.driver.with_playwright_page do |page|
        page.wait_for_selector('#modal').wait_for_element_state('enabled')
      end

などです。

まとめ

Playwrightの導入により、E2Eテストが安定して実行できるようになりました。
sleepを使わなくても、API通信の完了を待つことができるため、テストが安定して実行できるようになりました。

残念ながら使用者が少ないためか記事は少ないのですが、ライブラリのドキュメントは充実しており、不明な点があれば、公式ドキュメントで解決できることが多いです。Flakyなテストを回避するためにsleepを使っている方は、Playwrightを試してみてはいかがでしょうか。

E2Eテストを積極的に書きたいエンジニアを募集しています。

参考

https://yusukeiwaki.hatenablog.com/entry/2021/05/18/capybara-playwright-driver
https://qiita.com/YusukeTagawa/items/22d10a37f0fd86243ae9