有没有办法测试（单元/集成）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。我怎么能这样做？可能有点Jasmine 和Cucumber？

谢谢！

更新

感谢@idlefingers，以下是可行的方法：

设置：黄瓜，水豚。

功能/支持/env.rb：

Capybara.javascript_driver = :selenium

*features/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

features/some.feature:

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

如果有更好的方法，我很想知道！

Answer 1

有时要求元素是某种颜色。可以使用 Jasmine 等工具对此进行测试，但由于您想验证最终显示是否正确，因此基于浏览器的集成测试是正确的工具。 （要让它在 Jasmine 中工作，你必须做更多的工作并最终得到一个不太有效的测试......无论如何......）

我写了一个simple jQuery plugin called Color Spy 来查询一个元素的颜色。你可以问：

$(...).backgroundColor()
$(...).colorColor()

插件跟踪 DOM 计算颜色。

要使其在 selenium 测试的上下文中工作，您需要：

1. 确保插件可用。您可以只将其包含在您的页面中，或者有多种方法可以动态地将其引入。
2. 编写一个element_color(selector) 测试辅助函数。这将需要使用整个 get_eval 恶作剧来动态执行一些 Javascript。
3. 照常使用assert_equal。 （我的 jsutils 存储库中还有一些 Javascript 函数来断言颜色的“视觉接近性”——但这是一个不同的问题。）

希望这会有所帮助。

Answer 2

我可以理解您为什么要检查是否已将正确的 id 或类应用于元素，但我不明白您为什么要直接检查它的 css？这太脆弱了——仅仅改变颜色的深浅就会破坏你的测试！

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

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

Answer 3

您可以使用 Webrat（它使用 Nokogiri）来测试 HTML 正文响应：http://cheat.errtheblog.com/s/webrat/

那么你可以这样做：

assert_have_selector "#content.white"