【Playwright使用】Rails7.1 + Docker Compose環境にRSpecを導入する

今回はRails7.1から標準でサポートされるようになったPlaywrightをシステムテストの実行環境として、Docker Composeで動かしているRailsプロジェクトにRSpecを導入していきます。

こちらの記事で解説した、Rails7.1, Docker Composeの環境構築が完了している前提で進めていきます。

必要なgem, packageを追加

gemファイルに以下3つを追加します。

RSpecを実行するためのrspec-railsに加えて、画面を操作する命令を提供するcapybara、capybaraのドライバーとしてcapybara-playwright-driverを追加しています。

group :development, :test do
  gem "rspec-rails"
end

group :test do
  gem "capybara"
  gem "capybara-playwright-driver"
end

bundle installしておきます。

$ docker compose run --rm web bundle install

続いて@playwright/testをインストールします。

 docker compose run --rm web yarn add -D @playwright/test

コンテナ上でplaywrightをインストール

Dockerfile.devに以下を追記します。

コンテナ上でplaywirghtに関する依存関係のインストール・palywrightのインストールを行なっています。

# 省略
# Install node modules
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# ----- ↓追加↓ -----
# Install playwright dependencies
RUN yarn playwright install-deps && \
    yarn playwright install
# ----- ↑追加↑ -----

# 省略

依存関係のインストールを行わないと以下のような警告が出ます。

追記後、ビルドします。

$ docker compose build

これでplaywrightのインストールは完了です。

RSpecの設定

RSpecをインストールします。

$ docker compose run --rm web rails g rspec:install

自動生成された.rspecにフォーマット設定を追加します。

--format documentation

この後追加するsupportフォルダ内の設定ファイルを読み込めるようにrails_helper.rbのコメントアウトを外します。

Rails.root.glob('spec/support/**/*.rb').sort.each { |f| require f }

specフォルダ配下にsupportフォルダ追加後、以下の内容でcapybara.rbファイルを作成します。

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

これでシステムテスト実行時のcapybaraのドライバーをplaywrightにする設定が完了です。

RSpecの実行

試しにscaffoldで生成されたCRUD機能に対してシステムテストを作成してみます。

Taskモデルを作成します。

$ docker compose run --rm web rails g scaffold Task title:string content:text

specフォルダ配下にsystemフォルダを追加後、以下の内容でtasks_spec.rbファイルを作成します。

require "rails_helper"

RSpec.describe "Tasks", type: :system do
  it "taksを作成できる" do
    visit tasks_path

    click_on "New task"
    fill_in "Title", with: "タイトル"
    fill_in "Content", with: "内容"

    expect do
      click_on "Create Task"
      expect(page).to have_content "Task was successfully created."
    end.to change(Task, :count).by(1)
  end
end

RSpecを実行します。

$ docker compose run --rm web rspec

以下のような結果になればplaywrightで正常にテストが実行できています。

Tasks
  taksを作成できる

Finished in 1.23 seconds (files took 1.17 seconds to load)
1 example, 0 failures

これでPlaywrightをシステムテストの実行環境としたRSpecの導入は完了です。

参考

https://abillyz.com/dozono/studies/987
https://note.com/dev_onecareer/n/n67d25088b100