RSpecのエラー Failure/Error: expect(page).to have_selector '.alert-success', 〜 が出た時の対処法

本文に書いた解決策は間違いでした。申し訳ございませんが、正しい解決策についてはコメント欄をご覧ください。

Junichi Ito さん、本記事へのご指摘ありがとうございました。

はじめに

この記事の最後に本タイトルとは別にRSpecのエラー「Capybara::ElementNotFound: Unable to find field "タイトル"」が出た際の対処法もおまけとして簡単に記述しておきましたので参考にしていただければ幸いです。

エラー画面と問題の部分

エラー画面

Terminal

Failures:

  1) イベント管理機能 新規作成機能 新規作成画面でタイトルを入力したとき 正常に登録される
     Failure/Error: expect(page).to have_selector '.alert-success', text: '新規作成のテストを書く'
       expected to find visible css ".alert-success" with text "新規作成のテストを書く" but there were no matches. Also found "イベント「@event.title」を登録しました。", which matched the selector but not all filters.

問題の部分

events_spec.rb

context '新規作成画面でタイトルを入力したとき' do
      let(:event_title) { '新規作成のテストを書く' }

      it '正常に登録される' do
        expect(page).to have_selector '.alert-success', text: '新規作成のテストを書く'
      end
    end

Bootstrap4のクラス".alert-success"を持つ要素が画面内に見つからなかったとのことなのでレイアウトに誤記等が無いかを確認。
HTMLをSlimで記述しています。

app/views/layouts/application.html.slim (一部抜粋)

application.html.slim

.container
      - if flash.notice.present?
        .alert.alert-success = flash.notice

特に問題なさそう。

対処

とりあえずエラーメッセージをググってみた。
すると海外のStackOverflowで有力な情報を発見。

この方は私とは違う内容で質問されてましたが質問中のコードに以下の様に書かれていました。

expect(page).to have_content("Your email address has been updated successfully.")
expect(page).to have_css(".alert-success")

どうやら記述方法を間違えていたらしいのでこれを参考に問題の部分を以下の様に修正

events_spec.rb

context '新規作成画面でタイトルを入力したとき' do
      let(:event_title) { '新規作成のテストを書く' }

      it '正常に登録される' do
        expect(page).to have_content('新規作成のテストを書く')
        expect(page).to have_css('.alert-success')
      end
    end

$ bundle exec rspec spec/system/oogiri_events_spec.rb を実行

テストが通った(GREEN)

Terminal

.....

Finished in 4.64 seconds (files took 1.39 seconds to load)
5 examples, 0 failures

まとめ

Specエラー解決方法はいくつかあります。

• Specが通らない際はエラーコードを頼りに対象のファイルと行を見つけます。

• 時にはコンソールのsandboxモード($ bin/rails c -s)でモデルなどの各動きを確認して期待通りの検証か調査する。

• RSpecとCapybaraとの連携によるSystem Specではテストに失敗した時点のスクリーンショットを作成してくれるのでどのタイミングで失敗したのか視覚的に分かるので便利です。

• テスト失敗時のスクリーンショットは tmp/screenshots に保存されます。

おまけ

エラー「Capybara::ElementNotFound: Unable to find field "タイトル"」 が出た際の対処法

エラー画面

Terminal

Failure/Error: fill_in 'タイトル', with: event_title

   Capybara::ElementNotFound: Unable to find field "タイトル"

fill_inで指定した'タイトル'が見つからないとのこと。
i18nによる国際化対応でja.ymlに日本語対応を施したため、問題の部分とja.ymlに相違が無いか確認する。

問題の部分

event_spec.rb

before do
  visit new_event_path
  fill_in 'タイトル', with: event_title
  click_button '登録する'
end

config/locales/ja.yml

ja.yml

attributes:
      event:
        id: ID
        title: イベント名
...省略...

ja.ymlのtitle:に「イベント名」と設定されているのにevent_spec.rbのfill_inが「タイトル」になっているためエラーが発生したと考えられる。

対処

event_spec.rbのfill_inの部分を「イベント名」に修正したらテストが通った(GREEN)

event_spec.rb

before do
  visit new_event_path
  fill_in 'イベント名', with: event_title
  click_button '登録する'
end