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

Question

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

导航 ID 为 "views"，添加的 class 为 "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"'，即使当我在浏览器中检查该元素时我可以看到它。这些是我尝试过的一些不同的随机命令，来自我在尝试 Google 时在网上看到的答案，所有这些都给我同样的错误，或者他们说我的语法错误，我可以'找不到解决方法：

    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 about checking the CSS and this article 关于使用 Capybara 测试元素）对我没有用。这可能会给我带来问题，因为我正在尝试测试导航标签，而我在网上找到的所有示例都在讨论 div 或输入？有可能吗？

Answer 1

做 expect(page.html).to include('class="on_nav"') 永远不应该做，你应该忽略任何 article/tutorial 提出的建议。通过将页面源作为字符串获取，您将完全禁用 Capybaras wait/retry 满足给定条件的能力。

关于您的其他尝试

默认情况下，选择器类型为：css，因此 expect(page.html).to have_selector("#on_nav") 将查找 ID 为 'on_nav' 的元素，这不是您想要的，并通过调用 page.html 你再次禁用了 waiting/retrying 行为，因为字符串被解析回静态文档。

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

expect(page).to have_css("nav#views.on_nav") 是验证页面上是否存在元素的正确方法。它将查找 ID 为 views 且 class 为 on_nav 且 wait/retry 最多 Capybara.default_max_wait_time 秒的可见

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

How to test if class has been added to nav tag in Rspec

html

css

rspec

capybara