RSpec Capybara href の無い a タグにハマる

RSpecの feature spec で href の無い a タグのテストをしようとしてハマったのでメモ

ボタン / リンクの存在

ボタン

button や submit

<button>ボタンのラベル</button>
<input type="submit" value="ボタンのラベル" />

expect(page).to have_button 'ボタンのラベル'

リンク

a タグはボタンではなくリンクでないとマッチしない

<a href="example">リンクテキスト</a>

expect(page).to have_link 'リンクテキスト'

リンク先 (href) も含めてマッチ

expect(page).to have_link 'リンクテキスト', href: 'example'

ボタン / リンクのクリック

Capybara でクリックさせる

ボタン

button や submit

<button>ボタンのラベル</button>
<input type="submit" value="ボタンのラベル" />

click_button 'ボタンのラベル'

リンク

a タグ

<a href="example">リンクテキスト</a>

click_link 'リンクテキスト'

ボタンまたはリンク

button, submit, 'a' タグ どれでもマッチする

<button>ボタンのラベル</button>
<input type="submit" value="ボタンのラベル" />
<a href="example">リンクテキスト</a>

click_on 'ボタンのラベル'
click_on 'リンクテキスト'

href が無い a タグは have_link, click_link, click_on にマッチしない

<a>リンクテキスト</a>

expect(page).to have_link 'リンクテキスト'

👇

Failure/Error: expect(page).to have_link 'リンクテキスト'
  expected to find link "リンクテキスト" but there were no matches

href が無い a タグはマッチせず存在しないと言われてしまいました…

a tags without an href are not links, they are placeholders for links. That's how the HTML spec defines it, that's how every modern browser treats them. Capybara does indeed only click on links which have the href attribute, and imho, that's sensible behaviour. click_link 'foo' not working on links without href · Issue #379 · teamcapybara/capybara · GitHub

href がないとリンクではないからと言うことのみたい

href のない a タグの存在

have_selector を使う

<a>リンクテキスト</a>

expect(page).to have_selector('a', text: '<リンクテキスト>')

href のない a タグをクリック

find で要素を選択してクリックさせる

<a>リンクテキスト</a>

find('a', text: 'リンクテキスト').click

a タグに CSS のクラス名があるならクラス名で find してもOK

<a class="link_icon">
  <i class="icon"></i>
</a>

find('.link_icon').click

RSpec 時々しか書かないから何も分からん…

---

[参考]

• click_link 'foo' not working on links without href · Issue #379 · teamcapybara/capybara · GitHub
• 使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - Qiita

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)