RSpec の request spec で css_select を使って HTML の内容を確認する

やりたいこと

RSpec の request spec であるエンドポイントが返す HTML の内容を確認したいです。

例

例えば、あるエンドポイントが

<table>
  <thead>
    <tr><th>No</th><th>名前</th><th>絵文字</th><th>日時</th></tr>
  </thead>
  <tbody>
    <tr><td>3</td><td>さぶろう</td><td>🐈</td><td>2024/09/01 00:00:00</td></tr>
    <tr><td>2</td><td>はなこ</td><td>🐕</td><td>2024/08/31 23:59:59</td></tr>
    <tr><td>1</td><td>ジローラモ</td><td>🦘</td><td>2024/08/01 00:00:00</td></tr>
  </tbody>
</table>

という table 要素を含む HTML を返すとします。この table 要素の行が意図した順番で並んでいるか確認したいです。

方法

request spec 内で使用可能な css_select メソッドを使います。

describe 'GET /animals' do
  it 'includes emojis in the correct order' do
    get(animals_path)

    emojis = css_select('tbody td:nth-child(3)').map(&:inner_text)
    expect(emojis).to eq(%w(🐈 🐕 🦘))
  end
end

css_select メソッドは Nokogiri::XML::NodeSet オブジェクトを返します。これは具体的には以下のように Nokogiri メソッドと Nokogiri::XML::NodeSet#css メソッドを使用するのと同じです。

describe 'GET /animals' do
  it 'includes emojis in the correct order' do
    get(animals_path)

    emojis = Nokogiri(response.body).css('tbody td:nth-child(3)').map(&:inner_text)
    expect(emojis).to eq(%w(🐈 🐕 🦘))
  end
end

バージョン情報

• Ruby 3.3.4
• Rails 7.2.1
• rspec-rails 7.0.1

参考

• Rails テスティングガイド > 10.1 その他のビューベースのアサーション
• rails/rails-dom-testing: Extracting DomAssertions and SelectorAssertions from ActionView.