rails5中級チュートリアルでのテストがうまくいかない

Question

前提・実現したいこと

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ページにリダイレクトされ、ログインに成功する

該当のソースコード

login_spec.rb

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"に変更してみたが、解決することができなかった。
_signed_in_links_html.erb

<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>

補足情報（FW/ツールのバージョンなど）

初心者で、初質問でもあるため、情報の不足があると思いますが、そちらも含めてご教授いただけると幸いです。

vscode最新バージョン使用
railsバージョン　5.1.7
bootstrap

テストツール
factory_bot_rails
capybara 2.15
rspec-rails
selenium-webdriver
rails-controller-testing
headless
poktergeist

Answer 1

【以下、本人も気づいているので別の所に原因があると推測。再度、確認中。】

  <a id="user-setting"  class="dropdown-toggle" data-toggle="dropdown" href="#">

の id が user-settings になっていないのが原因です。

Comments

[kuromu0104]

原因である記述を修正したところ解決することができました！
ありがとうございました！

[Yasumichi]

CSS のセレクターでは、#で始まっている場合、#の後の部分が id 属性で指定した値、. で始まっている場合、. の後の部分が class 属性で指定した値です。
つまり、実際の属性値には、# や . はつきません。

[kuromu0104]

#の場合id属性、.はclass属性ですね。忘れてしまっていました。
お教えいただきありがとうございます。

[Yasumichi]

こちらも「rails5中級チュートリアル」の存在を知ることができ、幸いでした。