Is there a way to Test (Unit/Integration) that CSS is applied to the expected HTML Elements?

I am testing views with Cucumber and Rails right now and really enjoy the experience. I can easily say:

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               |

Now I'm wondering, how can I go one step further and say:

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

I feel like I saw that it is possible to do this with something like Node.js or other serverside javascript, because it's all browser dependent. Is there a 开发者_如何学JAVAway to do this, maybe with Selenium in just Safari and Firefox?

I just want to test for mainly colors and fonts, not necessarily layout b/c of the cross browser craziness. How could I do this? Maybe a little Jasmine with Cucumber?

Thanks!

Update

Thanks to @idlefingers, here's something that works:

Setup: Cucumber, Capybara.

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

If there's a better way, I'd love to know!

Sometimes the requirement is that an element is a certain color. It is possible to test this with tools such as Jasmine, but since you want to validate the final display is right, a browser-based integration test is the right tool. (To get this to work in Jasmine, you'd have to do quite a bit more work and end up with a less valid test... anyway...)

I wrote a simple jQuery plugin called Color Spy to be able to query an element about its colors. You can ask:

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

The plugin traipses up the DOM calculating the color.

To get this to work within the context of a selenium test, you will need to:

1. make sure the plugin is available. You can just include this in your page, or there are various ways to pull this in dynamically.
2. write an element_color(selector) test helper function. This will need to use the whole get_eval shenanigans to execute some Javascript dynamically.
3. Use assert_equal as normal. (I also have some Javascript function in my jsutils repo to assert "visual closeness" of colors-- but that's a different question.)

Hope this helps.

I can understand why you might want to check that the correct id or class has been applied to an element, but I can't see why you'd want to check it's css directly? That'll be so brittle - simply changing the shade of the colour will break your tests!

Also, I think you're missing cucumber's main strength - testing behaviour, not implementation. You should have a read of this - it makes some good points which are pertinent to the way you're currently testing.

In answer to your actual question, if you really want to do this, the only way I can think of is to execute javascript on the page to test the values. This can be done in selenium (with get eval). The same thing can be achieved through capybara so long as the js driver is working.

You could use Webrat (which uses Nokogiri) to test the HTML body response: http://cheat.errtheblog.com/s/webrat/

Then you can do:

assert_have_selector "#content.white"