【RSpec】Capybaraシステムテストで要素クリックが失敗したら確認したいこと

概要

Ruby on Railsで開発したアプリのシステムテスト実行時に、Capybaraの使い方で少し躓いた点を書いた記事です。

html要素をクリック出来ずにテストが失敗した原因と解決方法を簡単にまとめました。

もし、同じ内容でテストに失敗した方のご参考になれば幸いです。

テスト概要

• ハート文字をクリックするといいね/いいね解除できること

今回開発したアプリにはいいね機能を実装しており、ハートをクリックすることでいいねといいね解除ができるようにしました。

テスト・エラー詳細

下記コードを実行。

RSpec.describe 'Comments', type: :system do
  # 投稿をいいね・いいね解除できる
  it 'user can like the post' do
    click_link '♡'
    expect(page).to have_button '♥'

    click_link '♥'
    expect(page).to have_button '♡'
  end
end

実行結果は、下記エラーによりテスト失敗となりました。

# bundle exec rspec
Comments
  user can like the post (FAILED - 1)

  1) Comments user can like the post
     Failure/Error: click_link '♡'
     
     Capybara::ElementNotFound:
       Unable to find link "♡"

原因と解決方法

• 原因

クリックする要素をlinkにしていたことが原因でした。

今回、view側にフォームを用意し、'♡'をクリックした際にHTTPリクエストが送信されるように実装していました。
そのため、link要素ではなくbutton要素となっていたため、上記のエラーメッセージの仰る通り、'♡'　のリンクは見つからずテストが失敗しました。

• 解決方法
  click_link -> click_button / click_on

リンク要素をクリックではなく、ボタン要素をクリックできるclick_buttonもしくはclick_onに修正することで、無事テスト成功しました。

下記コードでは、ボタン要素をクリックするよう明示的に記載しています。

  it 'user can like the tweet' do
    click_link 'test tweet!!'
    click_button '♡'
    expect(page).to have_button '♥'

    click_button '♥'
    expect(page).to have_button '♡'
  end

下記記事を参考にしたところ、click_onを使えばリンク要素とボタン要素のどちらもクリック可能だと知ることが出来ました。

使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - リンクまたはボタンをクリックする

クリックする要素がリンクなのかボタンなのか、いちいち考えたくない場合は click_on が便利です。

終わりに

つまづいた内容自体はシンプルでしたが、Capybaraでのテストの書き方や、ユーザがクリックするのは何要素か？といった基礎的な部分を理解する良い機会となりました。

お読みいただきありがとうございました！

参考