Zenn
🦥

RSpecのCapybara+Playwright導入手順

に公開
Rails
GitHub Actions
RSpec
Playwright
capybara
tech

はじめに

RSpecでE2Eテストを書くために使えるCapybaraですが、1から導入するときに結構迷ったので、手順をまとめます。Driverには、Seleniumより速くて安定していると言われているPlaywrightを使いました。ブラウザはChromiumにしました。

アプリによって設定値などの細かい部分は異なると思いますが、大枠はこの記事通りに導入できると思います。

Gemfile

  1. Gemfile に capybara と capybara-playwright-driver を追加
group :test do
  gem 'capybara'
  gem 'capybara-playwright-driver'
end
  1. bundle install でgemをインストールして、Gemfile.lock が更新されることを確認
bundle install

spec/rails_helper.rb

ファイル構成は各自のお好みですが、今回は spec/support/capybara.rb を作成して、それを spec/rails_helper.rb で読み込む構成にしました。

  1. spec/support/capybara.rb を作成。設定値は適宜変えてください
require 'capybara/playwright'

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

Capybara.register_driver(:playwright) do |app|
  Capybara::Playwright::Driver.new(app, browser_type: :chromium, headless: true)
end

Capybara.default_max_wait_time = 15
Capybara.default_driver = :playwright
Capybara.javascript_driver = :playwright
  1. spec/rails_helper.rb にデフォルトで記載されている、このコードコメントをアンコメント
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].each { |f| require f }
  1. spec/rails_helper.rb に以下を追加して、テスト実行前にアセットのプリコンパイルが実行されるようにします。
RSpec.configure do |config|
  # ...

  config.before(:suite) do
    unless Rails.public_path.join('assets').exist?
      puts 'Precompiling assets...'
      `RAILS_ENV=test bundle exec rake assets:precompile`
    end
  end
end

Dockerfile

以下のように変更します。

  • apt-get install で curl もインストール
  • curl -sL でNode.js v20.xのセットアップスクリプトをダウンロードして実行
  • 前のステップで設定したv20のnodejsをインストール
  • Playwrightをセットアップ。今回ブラウザはChromiumです
RUN apt-get update -qq \
  && apt-get install -y --no-install-recommends build-essential curl \
  && curl -sL https://deb.nodesource.com/setup_20.x | bash - \
  && apt-get install -y nodejs \
  && npm install -g playwright \
  && playwright install-deps \
  && playwright install chromium \
  && apt-get clean \
  && rm -rf /var/lib/apt/lists/* \

Node.js

以下のコマンドで package.json と package-lock.json を作成します。これらのファイルはGitHub Actionsの実行時に必要になります。

npm init -y

npm install --save-dev

GitHub Actions

RSpecを実行するGitHub Actionsには、以下のstepsを追加しました。

    - name: Set up Node.js
    uses: actions/setup-node@v4
    with:
        node-version: 20.x
        cache: npm
    - name: Install npm
    run: npm ci
    - name: Install Playwright
    run: npx playwright install --with-deps chromium

参考までに、jobの全体はこんな感じです。

jobs:
  run-rspec:
    name: run-rspec
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: checkout
        uses: actions/checkout@v4
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: npm
      - name: Install npm
        run: npm ci
      - name: Install Playwright
        run: npx playwright install --with-deps chromium
      - name: Run RSpec
        env:
          RAILS_ENV: test
        run: bundle exec rspec

package.json, package_lock.json が無いと以下のエラーになります。

/home/runner/.npm
Error: Dependencies lock file is not found in xxx. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock

セッションストアの変更

セッションストアには普段DynamoDBを使っていましたが、test環境では使いたくないので、config/initializers/session_store.rb でtest環境では代わりに :cookie_store を使うように設定しました。

if Rails.env.test?
  Rails.application.config.session_store :cookie_store
else
  Rails.application.config.session_store :dynamodb_store
end

E2Eテストを書いて成功するか確認

適当にE2EテストのRSpecファイルを spec/system/ 配下に作成して、テストケースが成功することを確認します。私のアプリでは、APIや環境変数周りのstubが色々と必要でした。

Discussion