後へ      Topへ      次へ Rails8 で WEB アプリを作成。開発入門

自動テスト: System Test編

Rails が自動でブラウザ(Google Chrome)を操作するテストです。
JavaScript の動作確認が主な目的になります。
非常に強力なテストですが、かなりの手間と時間が掛かります。

注意
Rails 8.1 から、Scaffold で System Test が生成されなくなりました。
自前で用意する事は可能ですが、控えめに使うべきと言われています。
参考: https://railsguides.jp/testing.html#システムテストを生成する

サンプルプログラムでは、
Stimulus＆Turbo Stream の動作確認で使用します。

参考リポジトリ: https://github.com/Bonv-dev/book_mgmt/commit/302665e

chromedriver.exe

Rails とブラウザの橋渡しをするドライバーが必要です。
以下の手順で設定してください。

1. Google Chrome をインストールします。
   インストールは こちら
2. Chrome のバージョンを確認しておきます。
   Chrome を起動し、URL欄に chrome://settings/help と入力すれば確認できます。
   最新版に更新しておいてください。
3. 以下の方法で chromedriver.exe をダウンロードします。
   1. https://googlechromelabs.github.io/chrome-for-testing/ を開く。
   2. Stable の Version を確認。
      Chrome のバージョンが 144.0.7559.97 としたら 144.0.7559 まで一致していればOKです。
      (あまり経験はありませんが、一致しなければ動かないかもしれません。)
   3. Stable のリンクをクリック。
   4. Binary が chromedriver、Platform が win64 の行にあるリンクをコピーし、
      ブラウザの URL 欄に貼り付けます。
      chromedriver-win64.zip がダウンロードできます。
   5. chromedriver-win64.zip を解凍。
      chromedriver.exe を PATH の通ったフォルダにコピーすればOKです。

application_system_test_case.rb

前述の通り、Rails 8.1 から System Test が外れました。
よって、実施したい場合は、
最初に \test\application_system_test_case.rb を自前で用意します。
内容は以下とします。

require "test_helper"

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  driven_by :selenium, using: :headless_chrome, screen_size: [ 1400, 1400 ]
end

:headless_chrome では、Chrome が隠れた状態で実行されます。
debugger で止めるなどして、動作状態を確認したい場合は :chrome に書き換えてください。

rails test:system

ruby bin/rails test:system
で、System Test が実行できます。

0 failures, 0 errors, 0 skips
と表示されて終わればOKです。
エラーが発生したら、その時点でテストを中断し、
エラー内容を表示するので、デバッグします。

Selenium::WebDriver::Error::SessionNotCreatedError: session not created: 
This version of ChromeDriver only supports Chrome version XXX
のようなエラーになる場合は、  
Chrome と chromedriver.exe のバージョンが一致していません。
共に最新版に上げてください。

Devise: ログイン

サンプルプログラムでは、ユーザー認証に Devise を使用しています。
System Test では実際にブラウザを操作するため、
「ログイン」操作も必要です。

ログイン画面は WEBアプリ依存のため、
コントローラのような Devise 標準の仕組みはありません。
ユーザー操作でログインするのと同じ挙動をプログラムで実行します。

\test\application_system_test_case.rb に以下を追加します。

# Capybara でのログイン
def sign_in_for_systemtest(user, target_path=root_path)
  visit new_user_session_path
  fill_in "Eメール", with: user.email
  fill_in "パスワード", with: TestConstants::DEFAULT_PASSWORD
  click_button "Log in"
  assert_current_path target_path # ログインが終わるのを待つ
end

次に、各テストファイルの setup メソッドで以下のように書きます。

setup do
  @user = users(:admin)
  sign_in_for_systemtest(@user)
end

以下、sign_in_for_systemtest の中身の概説です。

• visit url
  ブラウザで url を開きます。
• new_user_session_path
  Devise 依存の値で /users/sign_in (ログイン画面) の URLです。
• fill_in “ラベル”, with: 値
  ラベルの文字列枠に「値」を記入します。
• click_button “ラベル”
  ラベルのボタンをクリックします。
• assert_current_path url
  現在開いている画面が url かを確認します。
  このメソッドは、画面が表示し終わるまで待ってくれます。
  テストコードは、ブラウザの画面表示より遥かに早いので、
  画面が表示されるまで次のコード実行を待ちたい時に便利です。
  指定 url 以外の画面で確定した場合はエラーになります。

Stimulus & Turbo Stream のテスト

実際に Stimulus & Turbo Stream の動作をテストします。

大まかな仕様は以下の通り。

• Step を選択する際、
  Floor、Cabinet、Step と順番に選ぶコードになっています。
• 上位が変更されると、下位の選択肢はリセットされて “選択してください” になります。

では、
参考リポジトリ: https://github.com/Bonv-dev/book_mgmt/commit/f6bad66 の
\test\system\books_test.rb での変更点を見ながら、下記を読み進めてください。

visit edit_book_path(@book)

edit_book_path は book の編集画面の URL です。
パラメータに @book を指定すると、その id が使用されます。
Rails では、id を指定する場面で概ねこのような指定が可能です。

assert_not find(“#floor_id”).find(“option”, text: “選択してください”).selected?

• find(“#floor_id”) は、
  ID が “floor_id” の要素を見つけます。
• 次にドットで繋いでいるので、
  floor_id の子要素を対象に、
• find(“option”, text: “選択してください”) は、
  option の中で text が “選択してください” の選択肢を見つけます。
• 更にドットで繋いでいるので、
  見つけた選択肢を対象に、
• selected? は、
  その対象が選択状態かを返します。
• assert_not は、
  対象が false ならOK、true なら NG で例外を吐きます。

纏めると、
ID が “floor_id” の配下にある、”選択してください” option が選択されていなければOK、
です。

なお、
assert は、
対象が true ならOK、false なら NG で例外を吐きます。

assert_equal は、
２つの対象の値が等しければOK、違っていれば NG で例外を吐きます。

select “2F”, from: “floor_id”

“floor_id” を持つ要素を対象に、
“2F” を select (選択) します。

assert_text

指定文字列が画面上で見つかればOK、見つからなければ NG で例外を吐きます。

accept_alert

accept_alert は、ブラウザのポップアップを制御します。

alert_text = accept_alert do
  click_button "Update Book"
end

• accept_alert do ～ end で囲まれたコードを実行し、
  ブラウザがアラートのポップアップを出したら、OK ボタンを押します。
• click_button “Update Book” は、
  “Update Book” と表示しているボタンを押します。

ちなみに、
OK か キャンセルかを聞く確認ポップアップを処理する場合は、

• accept_confirm
  OK ボタンを押す
• dismiss_confirm
  キャンセルボタンを押す
• accept_prompt(with: ‘文字列’)
  ポップアップの入力枠に ‘文字列’ を入力した上で OK ボタンを押す

などが使えます。

Capybara

System Test は、GEM capybara を使います。

基本的には、
対象画面HTML の要素(部品)を指定して、操作します。
代表的なものとして、

• visit(new_user_session_path) のように PATH を指定するもの
• find(“#floor_id”) のように Selector を指定するもの

があります。
Selector は多彩な指定ができます。
詳細は、Capybara の README Selectors を参照してください。

後へ      Topへ      次へ Rails8 で WEB アプリを作成。開発入門