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

当一个用户在我的网页上向下滚动时，一个类被添加到导航标签中，它会改变页面上的位置。当用户向后滚动到顶部时，该类将被删除，并移回原始位置。当我在浏览器中检查元素时，我知道此功能有效，并且类也有效。我正在尝试编写一个Rspec测试来测试这个特性。我一直在尝试使用水豚，但没有成功。测试的滚动部分可以工作，但在HTML和CSS中搜索添加的类却不行

导航id为“视图”，添加的类为“在导航上”。这是目前为止的测试：

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

错误消息是它在导航上找不到'class='“，即使我在浏览器中检查元素时可以看到它。这些是我尝试过的几个不同的随机命令，从我在谷歌搜索时在线查看的答案来看，它们都给了我相同的错误，或者它们说我的语法错误，我找不到如何修复它：

    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)

我对编写web测试是完全陌生的，但我确实知道我在网上找到的答案（例如关于检查CSS和关于使用Capybara测试元素的答案）对我不起作用。这可能会给我带来问题，因为我正在尝试测试nav标记，而我在网上找到的所有示例都是关于div或input的？甚至有可能吗？

做

expect（page.html）。包含（'class=“on_nav“）

是绝对不应该做的，你应该忽略任何文章/教程中建议的一切。通过以字符串形式获取页面源，您完全禁用了Capybaras等待/重试给定条件的能力

关于你的其他尝试

默认情况下，选择器类型为：css，因此

expect（page.html）。要使用"选择器（“#on"nav”）

将查找id为“on"nav的元素，而这不是您想要的，并且通过调用

page.html

再次禁用等待/重试行为，因为字符串被解析回静态文档

expect（page.has_css？（“.on_nav”））。to eq（true）

正越来越接近您想要的内容，但不会提供有用的错误消息，因为您的期望值仅为true或false

expect（page）。拥有_css（“nav#views.on _nav”）

是验证页面上是否存在元素的正确方法。它将在导航上查找id为

views

且类为

的可见元素，并等待/重试至Capybara.default_max_wait_time seconds，以使该元素存在。如果这对您不起作用，那么要么元素在页面上不可见，要么选择器实际上与元素不匹配，要么调用scrollBy时添加/删除类的JS不起作用。如果您使用的是selenium，请在调用scrollBy后暂停驱动程序，并检查浏览器中的元素，以确保它按预期添加/删除类，如果是，则将导航的实际HTML添加到您的问题中。
Doing
expect（page.HTML）。要包含（'class=“on_nav”'）
永远不应执行，你应该忽略任何文章/教程中提出的所有内容。通过以字符串形式获取页面源，您完全禁用了Capybaras等待/重试给定条件的能力

关于你的其他尝试

默认情况下，选择器类型为：css，因此
expect（page.html）。要使用"选择器（“#on"nav”）
将查找id为“on"nav的元素，而这不是您想要的，并且通过调用
page.html
再次禁用等待/重试行为，因为字符串被解析回静态文档

expect（page.has_css？（“.on_nav”））。to eq（true）
正越来越接近您想要的内容，但不会提供有用的错误消息，因为您的期望值仅为true或false

expect（page）。拥有_css（“nav#views.on _nav”）
是验证页面上是否存在元素的正确方法。它将在导航上查找id为
views
且类为
的可见元素，并等待/重试至Capybara.default_max_wait_time seconds，以使该元素存在。如果这对您不起作用，那么要么元素在页面上不可见，要么选择器实际上与元素不匹配，要么调用scrollBy时添加/删除类的JS不起作用。如果您使用的是selenium，请在调用scrollBy后暂停驱动程序，并在浏览器中检查元素，以确保它按预期添加/删除类，如果是，则将导航的实际HTML添加到您的问题中。
我使用的是Selenium，因此我在scrollBy后添加了
绑定。pry
暂停驱动程序，它正确添加/删除了类，但在scrollBy后似乎没有等待足够长的时间来更改元素，因为在我恢复测试后（退出pry）它成功了。但是如果不使用binding.pry暂停，它就会失败，即使我将Capybara.default.max\u wait\u时间设置得很高（我尝试了30次）。我在网上找不到这个问题的答案，如果这个问题与我的原始问题不相关，我可以单独提问。@ziegl107正如我在回答中提到的，如果你仍然希望在
page.html
上看到它，那么它将彻底击败水豚。default\u max\u wait\u time（我假设你的水豚。default.max\u wait\u time是一个打字错误）-您当前使用的是什么期望值。我实际上使用的是Selenium，因此我在scrollBy之后添加了
binding.pry
，以暂停驱动程序，并且它正确地添加/删除了类，但它似乎没有在scrollBy之后等待足够长的时间来更改元素，因为在我恢复测试（退出pry）之后，它成功了。但是如果不使用binding.pry暂停，它就会失败，即使我将Capybara.default.max\u wait\u时间设置得很高（我尝试了30次）。我在网上找不到这个问题的答案，如果它与我原来的问题不相关，我可以单独提问@