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

Question

当用户在我拥有的网页上向下滚动时，会在导航标签中添加一个类并更改页面上的位置。当用户滚动回顶部时，该类被删除并移回原始位置。当我在浏览器中检查元素时，我知道此功能和类有效。我正在尝试编写 Rspec 测试来测试此功能。我一直在尝试使用 Capybara，但没有成功。测试的滚动部分有效，但无法在 HTML 和 CSS 中搜索添加的类。

导航 id 是“views”，要添加的类是“on_nav”。这是目前为止的测试：

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

错误消息是它在页面上找不到“class=on_nav”，即使当我在浏览器中检查元素时我可以看到它。这些是我尝试过的一些不同的随机命令，从我在尝试谷歌时在线查看的答案中，都给了我同样的错误，或者他们说我的语法错误，我找不到解决方法：

    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 测试完全陌生，但我知道我在网上找到的答案（例如 this question 关于检查 CSS 和 this article 关于使用 Capybara 测试元素）对我没有用。这可能会给我带来问题，因为我正在尝试测试 nav 标签，而我在网上找到的所有示例都在谈论 div 或 input？有没有可能？

Answer 1

永远不应该这样做expect(page.html).to include('class="on_nav"')，并且您应该忽略任何文章/教程中建议的所有内容。通过将页面源作为字符串获取，您将完全禁用 Capybaras 等待/重试满足给定条件的能力。

关于你的其他尝试

默认选择器类型是 :css，所以expect(page.html).to have_selector("#on_nav") 会寻找一个 id 为 'on_nav' 的元素，这不是你想要的，并且通过调用page.html 你再次禁用了等待/重试行为，因为字符串被解析回静态文档。

expect(page.has_css?(".on_nav")).to eq(true) 越来越接近您想要的，但不会提供有用的错误消息，因为您的期望只是对或错

expect(page).to have_css("nav#views.on_nav") 是验证页面上是否存在元素的正确方法。它将寻找一个可见的

元素，其 id 为 views 和一个类 on_nav 并等待/重试到 Capybara.default_max_wait_time 秒以使该元素存在。如果这对您不起作用，则元素在页面上不可见，选择器实际上与元素不匹配，或者当您调用 scrollBy 时，添加/删除类的 JS 不起作用。如果您使用的是 selenium，请在调用 scrollBy 后暂停驱动程序并检查浏览器中的元素，以确保它按预期添加/删除类，如果是，则将导航的实际 HTML 添加到您的问题中。