Capybara::ElementNotFound - navbar item in toggled navbar

49 views Asked by At

I am testing elements in my navbar, and it currently fails to recognise an item. I first checked with save_and_open_page, and the page really looked correct, so I could not understand why my test failed. Then I checked with save_and_open_screenshot, and saw to my surprise that the navbar was collapsed and I only saw the hamburger menu. So it made sense that the test failed. But how to handle this? Why did it render a collapsed navbar?

Could this be due to running the specs in a headless browser? The strange thing is that these tests used to run, and I can't see what change caused this to fail now.

My spec:

# frozen_string_literal: true

feature "Users can view their data", js: true do
  let!(:user) { create(:user) }

  before do
    login_as(user)
    visit root_path
  end

  scenario "with valid credentials" do
    click_link t(:user_profile)

    fill_in t("activerecord.attributes.user.email"), with: user.email
    fill_in t("activerecord.attributes.user.password"), with: "password"
    click_button t(:update)

    expect(page).to have_content(t("activerecord.attributes.user.username"))
    expect(page).to have_content(t("activerecord.attributes.user.email"))
    expect(page).to have_content(t("activerecord.attributes.user.password"))
  end
end

My rendered HTML:

   <div class='collapse navbar-collapse' id='navbarSupportedContent'>
            <ul class='navbar-nav mr-auto'>
                <li class='nav-item active'>
                    <a class='nav-link' href='#'>

                        Home
                        <span class='sr-only'>(current)</span>
                    </a>
                </li>
                <li class='nav-item'>
                    <a class='nav-link' href='/pages/about'>About</a>
                </li>
                <li class='nav-item'>
                    <a class='nav-link' href='/users/edit'>Mijn profiel</a>
                </li>
                <li class='nav-item'>
                    <a class="nav-link" rel="nofollow" data-method="delete" href="/users/sign_out">Log uit</a>
                </li>
            </ul>
        </div>
0

There are 0 answers