Question

当用户向下滚动我所拥有的网页时，会将一个类添加到导航标记中，并更改页面上的位置。当用户向后滚动到顶部时，将删除该类并将其移回原始位置。当我在浏览器中检查元素时，我知道这个功能和类。我正在尝试编写一个Rspec测试来测试这个功能。我一直试图使用Capybara而没有成功。测试的滚动部分可以工作，但是在HTML和CSS中搜索添加的类不是。

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

我对编写网络测试完全不熟悉，但我确实知道我在网上找到的答案（例如this question关于检查CSS和this article关于使用Capybara测试元素）没有奏效为了我。它可能给我带来了问题，因为我正在尝试测试导航标签，而我在网上找到的所有例子都谈论div或输入？它甚至可能吗？

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")是验证页面上元素是否存在的正确方法。它将寻找可见的＆lt; nav＆gt; id为views且类为on_nav的元素，等待/重试Capybara.default_max_wait_time秒以使该元素存在。如果这对你不起作用，那么元素在页面上是不可见的，选择器实际上与元素不匹配，或者当你调用scrollBy时，添加/删除类的JS不起作用。如果您正在使用selenium，请在调用scrollBy后暂停驱动程序并检查浏览器中的元素以确保它按预期添加/删除类，如果是，则将实际的导航HTML添加到您的问题中。

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

1 个答案: