更新日: 2015年6月16日
RSpec

RSpec+Capybaraで同名の複数要素の並び順をテストする

同名のCSSセレクタの要素が複数並んでいる HTML の場合で、それらの要素の並び順を RSpec + Capybara でテストする Request Spec の例です。Capybara の page.all と find の機能を使って解決しました。

— 環境 —
capybara 2.4.4
rspec-rails 3.1.0

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

典型的な例としては、以下のように div タグの class が同名で、複数の要素が繰り返し出力されている場合。

<div class="greeting">
  <h2>good morning</h2>
</div>
<div class="greeting">
  <h2>good afternoon</h2>
</div>
<div class="greeting">
  <h2>good evening</h2>
</div>
<div class="greeting">
  <h2>good night</h2>
</div>

<h2>good morning</h2>

</div>

<h2>good afternoon</h2>

</div>

<h2>good evening</h2>

</div>

<h2>good night</h2>

</div>

page.all(“.greeting”) で greeting のCSSセレクタが指定された class の複数要素を全て取得した後、要素1つずつに find を使って、h2要素の中身のテキストが正しい順で並んでいるかどうかを Request Spec のテストで確認しました。

describe "greetings is sorted by correct order" do
  let(:greetings) { page.all(".greeting") }
  specify { expect( greetings[0].find('h2').text ).to eq "good morning" }
  specify { expect( greetings[1].find('h2').text ).to eq "good afternoon" }
  specify { expect( greetings[2].find('h2').text ).to eq "good evening" }
  specify { expect( greetings[3].find('h2').text ).to eq "good night" }
end