Is there a testing method (Unit / Integration) that CSS applies to expected HTML elements?

Question

I'm 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 wonder how I can go further and say:

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

It seems to me that I saw that you can do this with something like Node.js or another serveride javascript, because it depends on the browser. Is there a way to do this, maybe with Selenium only in Safari and Firefox?

I just want to test mainly colors and fonts, and not necessarily the b / c layout of the crazy cross browser. How can i do this? Maybe a little Jasmine with a cucumber ?

Thanks!

Update

Thanks to @idlefingers, something works here:

Setting: cucumber, capybara.

functions / support / env.rb:

 Capybara.javascript_driver = :selenium 

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

functions / some.feature:

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

If there is a better way, I would love to know!

Answer 1

I can understand why you might want to check that the correct element or class was applied to the element, but I don’t understand why you want to check it directly? It will be so fragile - just changing the hue of the color will break your tests!

In addition, I think that you lack the main strength of the cucumber - the testing behavior, not the implementation. You should read this - it gives some good points that are relevant to how you are testing now.

In answer to your real question, if you really want to do this, the only way I can think of is to execute javascript on the page to check the values. This can be done in selenium ( get eval ). The same can be achieved via capybara while the js driver is running.

Answer 2

Sometimes the requirement is that the element is a specific color. You can test this with tools like Jasmine, but since you want to check the final display correctly, the browser-based integration test is the right tool. (To get this to work in Jasmine, you will need to do a bit more work and end up with a less effective test ... anyway ...)

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

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

The plugin moves the DOM, calculating the color.

To make this work in the context of the selenium test, you need to:

• make sure the plugin is available. You can simply include it on your page, or there are various ways to dynamically pull it out.
• write element_color(selector) test helper function. This will need to use integer get_eval shenanigans to execute some Javascript dynamically.
• Use assert_equal as usual. (I also have a Javascript function in my jsutils repo to claim the "visual proximity" of colors, but that's another question.)

Hope this helps.

Answer 3

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

Then you can do:

 assert_have_selector "#content.white"