Question

I’m trying to write a cucumber test that ensures there are no errors from Compass CSS.

Error messages are inserted in to the page with the following CSS e.g.:

body:before {
  white-space: pre;
  font-family: monospace;
  content: "Syntax error: Undefined mixin 'horizontal-list'"; 
}

So I want to write a step that ensures the body:before’s content is empty, I’ve been trying variations around the following:

page.should_not have_css("body:before")

but this gives the error:

xmlXPathCompOpEval: function before not found 

Does anyone know how to get hold of :before?

Answer 1

After much searching I don’t think there is a way to get hold of the content in :before in an elegant way. However, I’ve got something that works well enough for my purposes so I’d like to share it:

Then /^I should not see any compass errors$/ do
  page.evaluate_script("document.styleSheets[1].cssRules[0].selectorText == \"body:before\";").should be_false;
end

The above tests if the first cssRule has the selectorText of body:before – which is true if Compass has inserted an error in the page.

Some caveats if you want to use the above:

1. Depending on your driver you may need to put a @javascript tag on your Scenario (Otherwise you may get a NotSupportedByDriverError exception)
2. The array index to styleSheets may be different for you (depending on the order your stylesheets are imported)
3. If you are using Internet Explorer as your test browser, you will need to change the JS – see here: https://stackoverflow.com/a/311437/91205
4. I’ve come across a difference between Safari and Firefox – Safari has selectorText as “body::before” whereas Firefox has “body:before” (NB : vs ::) other browsers may have similar issues.

If anyone knows of a better way to do this I’d be very interested – but for now, the above will stop any Compass errors sneaking through!