如何在rspec/capybara中测试div是否具有某种css样式？

Question

如何测试div标签是否具有某种css样式？我正试图测试它是否有display:none;或display:block.

我试过以下但它给了我一个错误:

it {should have_selector('signup_server_generic_errors', /display:\s*none/)}

Answer 1

我建议你不要试图找到css样式,而是编写测试来查找css类名.

这样你就可以改变底层的CSS样式,同时保持类相同,你的测试仍然会通过.

搜索底层样式很脆弱.样式经常变化.基于你的rspecs找到特定的样式元素会使你的测试更加脆弱 - 当你所做的就是改变div的外观时,他们更有可能失败.

基于查找css类的测试使测试更加健壮.它允许他们确保您的代码正常工作,而不需要在更改页面样式时更改它们.

在这种情况下,具体来说,一个选项可能是定义一个名为css类.hidden,该类设置display:none;在一个元素上以隐藏它.

像这样:

CSS:

.hidden {
  display:none;
}

HTML:

<div class="hidden">HIDE ME!</div>

水豚:

it {should have_css('div.hidden') }

这个水豚只是寻找一个拥有hidden该类的div - 如果你需要,你可以让这个matcher更复杂.

但重点是 - 将样式附加到css类名,然后将测试绑定到类,而不是样式.

Answer 2

你可以使用has_css?匹配器.它可以接受:visible选项.有关详细信息,请查看文档:http://rdoc.info/github/jnicklas/capybara/Capybara/Node/Matchers#has_css%3F-instance_method

例如,您可以尝试:

has_css?

Answer 3

我确保元素具有某个类的方法:

let(:action_items) { page.find('div.action_items') }

it "action items displayed as buttons" do
  action_items.all(:css, 'a').each do |ai|
    expect(ai[:class]).to match(/btn/)
  end
end

或者像这样的东西

expect(ai[:style]).to match(/color: red/)

我在这里找到了它:http://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Element#%5B%5D-instance_method