はじめに

RUNTEQに入学して4ヶ月目の学習者です。検証したことを記述していますが、誤った記述等あればコメント貰えると助かります。

1.なぜこの記事を書いたのか

テスト作成時に要素の指定の仕方を忘れることがある、いくつか種類があるのでそれぞれの特徴をまとめておきたいと思った。

2.環境

ruby 3.2.2
rails 7.1.2

3.色々

have_content

expect()内の要素の中に指定した値が含まれているかを確認する。これと逆でhave_no_contentがある。

view/homes/top.html.erb

<p class="example">テスト</p>

it 'テストの文字が表示されている' do
    visit home_top_path
    expect(page).to have_content('テスト'), '文字「テスト」が表示されていません'
end

have_selector

expect()内の要素でhave_selectorで第1引数で指定した要素の中に第2引数の要素が含まれているか確認する。下の例で表す様に孫要素でも検出可能。第1引数はクラス名の指定も可能。

view/home/top.html.erb

<div><p class="example">テスト</p></div>

it 'テストの文字が表示されている' do
    visit home_top_path
    expect(page).to have_selector('div', text: 'テスト'), '文字「テスト」が表示されていません'
end

find

capybaraのメソッドでfind()内のページ上の要素を選択する。

view/homes/top.html.erb

<div><p class="example">テスト</p></div>

it 'テストの文字が表示されている' do
    visit home_top_path
    expect(find('.example')).to have_content('テスト'), '文字「テスト」が表示されていません'
end

within

セレクタを指定する

view/homes/top.html.erb

<div class="example">
  <p id="p">テスト</p>
  <button id="btn">Push!</button>
</div>

app/javascript.application.js

// ボタンを押すとテキストが変更される

const p = document.getElementById('p');
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  p.textContent = 'テキスト変更'
})

it 'テストの文字が表示されている' do
      visit home_top_path
      within find('.example') do
        click_button 'Push!'
      end
      expect(find('.example')).to have_content('テキスト変更'), '文字「テキスト変更」が表示されていません'
    end

今のところはこの4つを使ってテストを作成していて困ることはありませんが、また便利な指定するメソッド、マッチャーがあったら追記していきます。