E2Eテストで使用したCapybaraのマッチャまとめ

開発環境

have_selector

特定のクラス内のテキストを検証

<div class="w2ui-col-header" >id</div>

expect(page).to have_selector ".w2ui-col-header", text: "id"

have_content

特定の文字列が表示されていることを検証

expect(page).to have_content "Create New Task"

have_field

テキストボックスに特定の値が入っていることを検証

<label for="task_name">Name</label>
<input type="text" id="task_name" value="test1">

expect(page).to have_field "Name", with: "test1"

have_select

セレクトボックスで特定の値が選択されていることを検証

expect(page).to have_select("Priority", selected: "high")

have_css

特定のCSSが存在することを検証

 expect(page).to have_css ".w2ui-sort-up"

have_no_content

特定の文字列が表示されていないことを検証

expect(page).to have_no_content "test1"

have_no_css

特定のCSSが存在しないことを検証

 expect(page).to have_no_css ".w2ui-sort-up"

find(要素).click

特定の要素を取得してクリックするその要素がボタンやリンクじゃなくてもOK

<div class="w2ui-button">Add</div>

find(".w2ui-button").click

first(要素).click

最初に見つけた要素をクリックする

<div class="w2ui-sort-up"></div>

first(:css, ".w2ui-sort-up").click

click_on

ボタンもしくはリンクをクリックする

click_on "登録する"

fill_in

フォームにテキストを入力

<label for="task_name">Name</label>
<input type="text" id="task_name">

fill_in "Name", with: "test"

select

セレクトボックスを選択

<label for="task_priority">Priority</label>
<select id="task_priority">
  <option>high</option>
  <option>low</option>
</select>

select "high", from: "Priority"

end_with

文字列の末尾を検証

expect(current_url).to end_with "tasks/new"

confirmのテキストを検証する

expect(page.driver.browser.switch_to.alert.text).to eq "Are you sure?"

acceptもしくはdissmissを使ってポップアップを閉じないとブラウザがうまく閉じられなくてエラーが出ます

confirmでOKを選択する

 page.driver.browser.switch_to.alert.accept

confirmでキャンセルを選択する

 page.driver.browser.switch_to.alert.dismiss

within

特定の要素を中を検証/操作する

<div class="w2ui-button">

<div id="tasks">
  <div class="w2ui-button"></div> # こっちを操作したい
</div>

within find("#tasks") do
  find(".w2ui-button").click
end

新しいタブへ遷移する

handle = page.driver.browser.window_handles.last
page.driver.browser.switch_to.window(handle) do
end

タブを閉じる

閉じたあとページを移動する必要がある

page.driver.browser.close
page.driver.browser.switch_to.window(windows.first) ##これがないとエラーになる

参考資料

使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - Qiita 【Rails】Selenium/RSpecでconfirmダイアログのテストをする - Qiita

wancoro blog

学んだことをアウトプットしていきたいと思います