Rails: システムテストを複数の画面サイズで実行する（翻訳）

Rails: システムテストを複数の画面サイズで実行する（翻訳）

Railsのシステムテスト（system test）は、Webブラウザでのユーザー操作をシミュレートするので、アプリの実際の利用状況に近いテストを行えます。レスポンシブアプリの場合、複数の画面サイズを切り替えてテストする必要もあります。

システムテストの内部で使われるツールであるCapybaraには、テスト実行中に現在のウィンドウのサイズを変更するメソッドがあります。
ただし、テスト項目はランダムな順序で実行するものであるため、ウィンドウのサイズを変更するテストの完了後は、画面サイズを復元する必要があります。そうしないと、以後そのウィンドウで実行されるテストが失敗する可能性があります。

モバイル画面用のシステムテストのセットを作成する方法を見てみましょう。

🔗 モバイル用のシステムテスト

モバイル専用のサブクラスApplicationSystemTestCaseを作成します。これにより、各テストケースの前後に呼び出されるsetupメソッドとteardownメソッドでウィンドウのサイズが変更されるようになります。

require "test_helper"

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

class MobileSystemTestCase < ApplicationSystemTestCase
  setup do
    visit root_path
    current_window.resize_to(375, 812)
  end

  teardown do
    current_window.resize_to(*ApplicationSystemTestCase::WINDOW_SIZE)
  end
end

この新しいベースクラスを使って、モバイル画面を対象とするテストを作成できます。

モバイルでのみ、ナビゲーションバーにハンバーガーメニューが表示されるとします。この場合は以下のようにテストできます。

require "application_system_test_case"

module Mobile
  class NavigationBarTest < MobileSystemTestCase
    test "can access sign up page via burger menu" do
      visit root_path

      find(".navbar-burger").click
      click_on "Sign Up"

      assert_current_path sign_up_path
    end

    test "can access login page via burger menu" do
      visit root_path

      find(".navbar-burger").click
      click_on "Log in"

      assert_current_path login_path
    end
  end
end

これで、以下のコマンドでシステムテストを実行すれば、上の2つのテストでウィンドウのサイズがモバイル用に変更され、完了後にデスクトップ用のサイズに戻ります。

$ bin/rails test:system

お知らせ

本記事を気に入っていただけたら、ぜひ私の著書『The Rails and Hotwire Codex』を読んでRailsとHotwireのスキルをアップしてください。

関連記事

Rails: システムテストのドライバをSeleniumからPlaywrightに差し替えたら安定した（翻訳）