如何测试是否已将类添加到Rspec中的nav标签中

Question

When a user scrolls down on a webpage I have, a class gets added to the nav tag and it changes positions on the page. When the user scrolls back to the top, the class is removed and it moves back to the original position. I know this feature works and the class when I inspect the element in a browser. I'm trying to write an Rspec test to test this feature. I've been trying to use Capybara without success. The scrolling part of the test works but searching the HTML and CSS for the added class isn't.

The nav id is "views" and the class being added is "on_nav". This is the test so far:

  scenario 'Scroll down' do
    visit '/'
    page.execute_script "window.scrollBy(0,1000)"
    expect(page.html).to include('class="on_nav"')
  end

The error message is that it cannot find 'class=on_nav"' on the page, even though when I inspect the element in the browser I can see it. These are a few of the different random commands I've tried, from answers I've looked at online when trying to Google this, that all give me the same error or they say my syntax is wrong and I can't find how to fix it:

    expect(page.html).to have_selector("#on_nav")
    expect(page).to have_css("nav#views.on_nav")
    expect(page.has_css?(".on_nav")).to eq(true)

I am completely new to writing web tests, but I do know the answers I have found online (for example this question about checking the CSS and this article about testing elements with Capybara) haven't worked for me. It might be giving me problems because I'm trying to test the nav tag whereas all the examples I've found online talk about either div or input? Is it even possible?

Answer 1

Doing expect(page.html).to include('class="on_nav"') should never be done, and you should ignore everything from any article/tutorial that suggested that. By getting the page source as a string you are completely disabling Capybaras ability to wait/retry for the given condition to be met.

With regards to your other attempts

By default the selector type is :css, so expect(page.html).to have_selector("#on_nav") would look for an element with an id of 'on_nav' which isn't what you want, and by calling page.html you've again disabled waiting/retrying behavior since the string gets parsed back into a static document.

expect(page.has_css?(".on_nav")).to eq(true) is getting closer to what you want but will not provide useful error messages since your expectation is just for true or false

expect(page).to have_css("nav#views.on_nav") is the correct way to verify an elements existence on the page. It will look for a visible <nav> element with an id of views and a class of on_nav and wait/retry up to Capybara.default_max_wait_time seconds for that element to exist. If that isn't working for you then either the element isn't visible on the page, the selector doesn't actually match the element, or your JS that's adding/removing the class isn't working when you call scrollBy. If you're using selenium, pause the driver after calling scrollBy and inspect the element in the browser to ensure it's adding/removing the class as expected, and if it is then add the actual HTML of the nav to your question.