Select body:before with RSpec/XPath/CSS

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?

I think it has to do with it being a pseudo-element, and not a real HTML element. — BoltClock, Jan 12 '12 at 13:58
Yes I came to the same conclusion - though I can see why have_xpath would get upset with that I expected have_css to work! — Ash, Jan 12 '12 at 14:02

score 0 · Accepted Answer · edited May 23 '17 at 11:55

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:

Depending on your driver you may need to put a @javascript tag on your Scenario (Otherwise you may get a NotSupportedByDriverError exception)
The array index to styleSheets may be different for you (depending on the order your stylesheets are imported)
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
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!

Select body:before with RSpec/XPath/CSS

1 Answers1