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

Question

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 way 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!

Answer 1

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.