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类的测试使测试更加健壮。它允许他们确保您的代码正常工作，而不需要在更改页面样式时更改它们。

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

像这样：

的CSS：

.hidden {
  display:none;
}

HTML：

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

水豚：

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

这个水豚只是寻找一个具有hidden类的div - 如果需要，你可以使这个匹配器变得更加复杂。

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

Answer 2

您可以使用has_css?匹配器。它可以接受:visible个选项。有关详细信息，请查看文档：{{3}}

例如，您可以尝试：

it { should have_css('div.with-some-class', :visible => true) }

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

Answer 4

您可以使用Capybara的assert_matches_style或Rspec HaveStyle匹配器（在下面使用assert_matches_style）：

直接使用assert_matches_style时，它是：

find(".element").assert_matches_style("font-size" => "46px")

我对Rspec语法不太熟悉，但是应该是这样的：

it { should match_style("font-size" => "46px") }

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

4 个答案: