有没有办法测试(单元/集成)CSS应用于预期的HTML元素？

Question

我正在使用Cucumber和Rails测试视图,真正享受这种体验.我可以很容易地说:

Background:
  Given I am logged in as a customer
Scenario: View the Welcome Page
  When I go to the home page
  Then I should be on the "Welcome" page
  And I should see the following in the sidebar:
    | selector                  | text                |
    | h3                        | Search              |
    | .home-page                | Home                |
    | .about-page               | About               |

现在我想知道,我怎么能更进一步说:

And I should see the following colors on the "Welcome" page:
  | selector                  | background          |
  | #content                  | white               |
  | #sidebar                  | grey                |
  | #navigation               | blue                |

我觉得我看到可以使用Node.js或其他服务器端javascript这样做,因为它依赖于所有浏览器.有没有办法做到这一点,也许只有Safari和Firefox的Selenium？

我只是想测试主要是颜色和字体,不一定是跨浏览器疯狂的布局b/c.我怎么能这样做？也许一个小茉莉与黄瓜？

谢谢!

更新

感谢@idlefingers,这里有一些有用的东西:

设置:Cucumber,Capybara.

功能/支持/ env.rb:

Capybara.javascript_driver = :selenium

*功能/ step_definitions/css_steps.rb:*

Then /^I should see the color "([^"]+)" on the ([^"]+)$/ do |color, selector|
  element_color = page.evaluate_script('$("##{selector}").css("border-left-color");') # "rgb(221, 221, 221)"
  assert_equal color, some_color_conversion_method(element_color)
end

功能/ some.feature:

And I should see the color "red" on the sidebar

如果有更好的方法,我很想知道!

Answer 1

我可以理解为什么您可能想要检查正确的 id 或类是否已应用于元素，但我不明白为什么您想要直接检查它的 css？那会很脆弱 - 简单地改变颜色的深浅就会破坏你的测试！

另外，我认为你错过了黄瓜的主要优势 - 测试行为，而不是实施。您应该阅读本文- 它提出了一些与您当前测试方式相关的好观点。

在回答您的实际问题时，如果您真的想这样做，我能想到的唯一方法是在页面上执行 javascript 来测试值。这可以在 selenium 中完成（使用get eval）。只要 js 驱动程序正常工作，通过 capybara 就可以实现同样的效果。