前提・実現したいこと
rails5中級チュートリアルを行なっています。
チュートリアルの3-3でのテストの部分で
昨日から以下のエラーが発生し、テストをパスすることができず、困っていた。
発生している問題・エラーメッセージ
ターミナルでのrspec spec/features/user/login_spec.rb実行時
1) Login ユーザーがloginページにリダイレクトされ、ログインに成功する
Failure/Error: expect(page).to have_selector('#user-settings')
expected to find css "#user-settings" but there were no matches
# ./spec/features/user/login_spec.rb:13:in `block (2 levels) in <top (required)>'
Finished in 4.17 seconds (files took 2.75 seconds to load)
1 example, 1 failure
Failed examples:
rspec ./spec/features/user/login_spec.rb:6 # Login ユーザーがloginページにリダイレクトされ、ログインに成功する
該当のソースコード
require "rails_helper"
RSpec.feature "Login", :type => :feature do
let(:user) { create(:user) }
scenario 'ユーザーがloginページにリダイレクトされ、ログインに成功する', js: true do
user
visit root_path
find('nav a', text: 'ログイン').click
fill_in 'user[email]', with: user.email
fill_in 'user[password]', with: user.password
find('.login-button').click
expect(page).to have_selector('#user-settings')
end
end
試したこと
①エラー文で検索をかけるも、手がかりを見つけることができなかった。
②エラー文にcssの"#user-setting"とhave_selectorの"#user-setting"が一致しないとあるため、cssの"#user-setting"に問題があると仮説するが、そもそもcssに"#user-setting"というものがなくどうすれば良いのかすらわからない状態であった。
③vscodeの文字列検索で[user-setting]と検索した際に、[_signed_in_links.html.erb]ファイル内でuser-settingをidとして定義してある箇所があったためそちらの記述を"#user-setting"に変更してみたが、解決することができなかった。
<li class="dropdown pc-menu">
# この下の行の"user-settingを変更を試した"
<a id="user-setting" class="dropdown-toggle" data-toggle="dropdown" href="#">
<span id="user-name"><%= current_user.name %></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to 'プロフィールを編集', edit_user_registration_path %></li>
<li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete%></li>
</ul>
</li>
<li class="mobile-menu">
<%= link_to 'プロフィールを編集', edit_user_registration_path %>
</li>
<li class="mobile-menu">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
###解決方法
一日以上時間を費やしては埒が明かないと考え,teratailで質問を投げかけたところ解決。
上記にある試したこと③にもある_signed_in_links_html.erbでのid指定を#user-settingsではなく
user-settingsに修正したところテストを通過することができた。
###学び
cssセレクタでは、#はid属性、.の場合はclss属性ということを完全に忘れてしまっていた。
補足情報(FW/ツールのバージョンなど)
vscode最新バージョン使用
railsバージョン 5.1.7
bootstrap
テストツール
factory_bot_rails
capybara 2.15
rspec-rails
selenium-webdriver
rails-controller-testing
headless
poktergeist