问题:有没有办法测试(单元/集成)CSS 是否应用于预期的 HTML 元素?

我现在正在使用 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,这是可行的:

设置:黄瓜,水豚。

features/support/env.rb:

Capybara.javascript_driver = :selenium

*功能/步骤_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

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

解答

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

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

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