はじめに

rspecの実装例はたくさんあるのですが、minitestがなかったので備忘録。

前提条件

rails7でrails newした直後の状態を想定
docker-composeを利用
capybara + selenium-webdriverの組み合わせ

Goal

bin/rails test:systemがエラーなく動作する
テスト中のブラウザの動きを確認することができる

修正箇所

1. Gemfileの修正

下記のように selenium-webdriver を追加してbundle installしてください。

Gemfile

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
 gem "capybara"
+  gem "selenium-webdriver"
end

2. application_system_test_case.rbの修正

optionsを追加

test/ruby:application_system_test_case.rb

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  driven_by :selenium, using: :chrome, screen_size: [1400, 1400], options: {
+    browser: :remote,
+    url: ENV['SELENIUM_REMOTE_URL']
  }
end

3. test_helper.rbの修正

Capybara.server_host 及び Capybara.app_host を追加。
なお、環境変数 HOSTNAME はbashの環境変数で特別なことをしていない限りこのままでよいです。

test/test_helper.rb

ENV["RAILS_ENV"] ||= "test"
require_relative "../config/environment"
require "rails/test_help"
+ Capybara.server_host = "0.0.0.0"
+ Capybara.app_host = "http://#{ENV.fetch("HOSTNAME")}:#{Capybara.server_port}"

class ActiveSupport::TestCase

...

4. docker-compose.ymlの修正

webコンテナには環境変数 SELENIUM_REMOTE_URL をセットします。
また、webdriver_chromeコンテナを追加して、7900 ポート(VNC用)を開放しておきます。

version: '3'
services:
  db:
...

  web:
...

+    environment:
+      SELENIUM_REMOTE_URL: http://webdriver_chrome:4444/wd/hub
    ports:
      - "3000:3000"
    depends_on:
      - db
+      - webdriver_chrome
...

+  webdriver_chrome:
+    image: selenium/standalone-chrome
+    ports:
+       - "7900:7900"
...

実行結果

bash-5.1# bin/rails test:system
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.19s.
yarn run v1.22.17
$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds

  app/assets/builds/application.js      188.1kb
  app/assets/builds/application.js.map  322.4kb

Done in 0.23s.
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.18s.
yarn run v1.22.17
$ sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
Done in 0.65s.
Running 4 tests in a single process (parallelization threshold is 50)
Run options: --seed 42974

# Running:

Capybara starting Puma...
* Version 5.6.4 , codename: Birdie's Version
* Min threads: 0, max threads: 4
* Listening on http://0.0.0.0:42743
....

Finished in 6.288535s, 0.6361 runs/s, 1.7492 assertions/s.
4 runs, 11 assertions, 0 failures, 0 errors, 0 skips

問題ないですね。

動作している途中も確認してみます。

テストが始まる前に http://localhost:7900 にアクセスすると下記の画面がひょじされますので、接続をクリックしてパスワードに secret と入力して

下記の画面になれば準備Okです。この状態で bin/rails test:system を動かせば確認できると思います。

なお、余談ですがテストに失敗した結果はデフォルトでは tmp/screenshots に出力されます。

minitestでE2Eテストをする