与Capybara has_css匹配器的Rspec无法正常工作

Question

在Cucumber中,有了Rspec和Capybara,我有一个测试来检查按钮是否有类.这里是

expect(@some_button).to have_css(".in-cart")

它失败了,但是

@some_button['class']

回报

'btn product in-cart'

所以按钮肯定有"购物车"类.

作为临时措施,我改变了我的考试; -

expect(@some_button['class']).to match /in-cart/

这显然是疯了.但为什么要'have_css'或'has_css？' 对于明显具有预期类的DOM元素,返回false？

page.all('.in-cart')也包含按钮,因此Capybara绝对可以找到它.

顺便说一下,我也尝试过'button.in-cart','in-cart',期待(等).to have_selector,expect(etc.has_selector？('.in-cart')).be be_truthy和所有组合.

Answer 1

have_css 期望matcher应用于父容器而不是实际元素

# your view
<div id="container">
  <div class="in_cart product"></div>
</div>

# your step definition
parent = page.find('div#container')
expect(parent).to have_css(".in-cart")
# => returns true, as there is nested div.in_cart
expect('div#container div').to have_css(".in-cart")
# => returns false, as there is no such selector inside of the latter div

在匹配确切对象的属性时,您必须坚持按键进行简单的查询

element = page.find('div#container div')
element['class'].should include('in-cart')
expect(element['class']).to match /in-cart/

相同的逻辑适用于所有RSpecMatchers.

Answer 2

在较新版本的Capybara / Rspec中，默认情况下expect(page)将查询整个页面以查找匹配项。但是，有时我们可能不希望这样做，而是希望将其定位到页面的特定类/区域。对于这些情况，请缩小page使用范围within：

within('.container') do
  expect(page).to have_css(".in-cart")
end

假设父级有一个containerCapybara 类，它将仅在此元素内搜索。