Zenn
💯

RailsのCapybaraでダイアログのボタンを確実にクリックする方法

2024/08/28に公開
Rails
capybara
tech

この記事の概要

この記事では、RailsアプリケーションのテストにおいてCapybaraを使用し、ダイアログ内のボタンを確実に押す方法として以下、説明する記事です。

  • ダイアログの表示を待機してからボタンを押す方法
  • 特定の要素内での操作を限定する方法
  • ダイアログの表示状態を確認する方法

コード例

以下に、ダイアログ内のボタンを確実に押すためのCapybaraコードの例を示します。

# ダイアログが表示されるまで待つ
expect(page).to have_css('.modal-dialog', visible: true)

# 「あとにする」ボタンをクリック
within('.modal-dialog') do
  click_button 'あとにする'
end

# ダイアログが閉じられたことを確認
expect(page).to have_css('.modal-dialog', visible: false)

メソッドの説明

within

within メソッドは、特定の要素内でのみ操作やアサーションを行うためのスコープを設定します。

公式ドキュメントはこちら

within('#admin') do
  fill_in 'Name', with: 'Admin'
end

このように、特定のセレクタ（この場合は #admin）内での操作を限定できます。これにより、同じ名前の要素が複数ある場合でも、意図した要素を正確に操作できます。

expect(page).to have_css

have_css マッチャーは、指定したCSSセレクタに一致する要素がページ上に存在するかをチェックします。

公式ドキュメントはこちら

expect(page).to have_css('h1#title', text: 'My Title')

visible: true/false オプションを使用することで、要素が表示されているか確認できます。例えば：

expect(page).to have_css('.modal-dialog', visible: true)

これは、.modal-dialog クラスを持つ要素が表示されていることを確認します。

まとめ

  • Capybaraの within メソッドを使用することで、特定の要素内での操作を限定できます。
  • expect(page).to have_css を使用して、要素の存在や可視性を確認できます。
  • これらの機能を組み合わせることで、ダイアログ内のボタンを確実にクリックできます。

Discussion