0
Help us understand the problem. What are the problem?

posted at

minitestでE2Eテストをする

はじめに

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 と入力して

image.png

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

image.png

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?