Rails システムテストを書く(RSpec 不使用)

システムテストでは、ユーザーのブラウザ操作をテストする。Rails プロジェクトでは Capybara(カピバラ )という Gem によって、ブラウザ(ヘッドレスブラウザ指定可)で実行される。

Rails では RSpec というテスティングフレームワークが使われることが多いが、この記事では Rails 標準のテスティングフレームワークを使用する。

Capybara のDSL(抜粋)

Capybara では、Capybara 用のわかりやすい書き方(DSLドメイン固有言語)が用意されている。

visit パス  # パスのページへ遷移
click_on "リンクテキスト"  # リンクテキストをクリック
fill_in "ラベル名", with: "入力テキスト"  # フォームに入力
choose "ラベル名"  # ラジオボタン選択
check "ラベル名"  # チェックボックスにチェック

詳しくは公式ドキュメントなどを参照。

GitHub - teamcapybara/capybara: Acceptance test framework for web applications

システムテストの書き方

コマンドで、システムテストのスケルトン(ひな形)を作成。

$ bin/rails g system_test memos
      invoke test_unit
      create test/system/memos_test.rb

システムテスト実行コマンド

$ bin/rails test:system

# ファイルを指定してテスト実行
$ bin/rails test 実行するテストファイルのパス

memos_test.rb(作成されるスケルトン)

require "application_system_test_case"

class MemosTest < ApplicationSystemTestCase
  # test "visiting the index" do
  #   visit memos_url
  #
  #   assert_selector "h1", text: "Memos"
  # end
end

memos_test.rb(例)

require "application_system_test_case"

class MemosTest < ApplicationSystemTestCase
  test "新しいメモを作成できる" do
    visit new_memo_path
    fill_in "タイトル", with: "新しいメモ"
    fill_in "メモ", with: "新しいメモの内容。"
    click_on "登録する"
    assert_text "メモが保存されました"
  end
end

(テスト内容)

  1. new_memo_path のページへ遷移
  2. タイトルに「新しいメモ」と入力
  3. メモに「新しいメモの内容。」と入力
  4. 「登録する」をクリック
  5. 「メモが保存されました」というテキストが表示されていればテストをパスする

Rails テスティングガイド - Railsガイド

範囲を指定する

フォームやリンクのボタンなどは、一画面に複数存在することも多いため、システムテストをするときは範囲を指定した方がよい。

そのとき使えるのが、withinセレクタで範囲を指定することができる。

within "form#comment" do
  fill_in "コメント", with: "メモへのコメント。"
  click_on "登録する"
end

within "セレクタ" doendで囲むと、セレクタで指定した場所に対して処理を実行できる。上の例では、id="comment" の form を指定している。

GitHub - teamcapybara/capybara: Acceptance test framework for web applications

Method: Capybara::Session#within — Documentation for jnicklas/capybara (master)

モーダル

リソースの「削除」をクリックしたときなどに表示されるアラートなどをモーダルという。テスト上でこの「OK」ボタンや「キャンセル」ボタンを押すには、confirmを使う。

f:id:masuyama13:20200816235127p:plain

accept_confirm:confirm(確認)を受け入れる(OKボタンを押す) dissmiss_confirm:confirm(確認)を受け入れない(キャンセルボタンを押す)

モーダルが立ち上がる処理部分を囲む。

# 削除をクリックすると表示される confirm で OKボタンを押す
accept_confirm do
  click_on "削除"
end

teamcapybara/capybara: Acceptance test framework for web applications

ヘッドレスブラウザを使う

デフォルトではブラウザは Chrome になっていて、テストのたびに Chrome のウインドウが立ち上がる。見ているとなかなか面白いが、ウインドウを立ち上がらせたくないときはヘッドレスブラウザを指定することもできる。

設定をを変更するには、application_system_test_case.rb を編集する。

test/application_system_test_case.rb

require "test_helper"

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

using: :chromeusing: :headless_chrome に変更すれば OK。

Rails テスティングガイド - Railsガイド