Checking that CSS has been updated using capybara

Question

I'm currently writing a web app that updates it's pages CSS based on user input. I've got it all working fine, but I'm having trouble getting my automated tests to confirm that the CSS has actually been updated.

Basically, I just want to verify that the contents of a <style> tag in the document <head> have been updated to a certain value. I'm using capybara (with the selenium driver) for my tests, with this code:

styles = page.all('style')
styles.length.should == 1
styles[0].text.should == style

It all works as expected, until the final line, which fails as it seems that styles[0].text is always "". I've also tried .value but it is always nil. I'm pretty sure the CSS is actually being updated, as I can see the changes in the firefox window that the tests are running in.

So, is there a way to get at the contents of the <style> tag using capybara?

Do I understand that you're trying to get at the contents of the <style> section in the documents HEAD? — Jon M
– Jon M, Commented Aug 26, 2012 at 15:34

Jon M · Accepted Answer · 2012-08-26 15:51:33Z

2

It seems Capybara (with Selenium at least, I didn't try any other drivers) won't show you this, I presume because the style content is wrapped in an HTML comment so it gets ignored e.g.:

<STYLE type="text/css">
    <!--
    .newfont { color:red; font-style:italic }
    -->
</STYLE>

You do, however, have access to the page's source with page.source, so you can use that to get at the style content. The source is just a big string, so one way to dig into it is to parse it with Nokogiri (which is required by Capybara so you'll have it already):

page = Nokogiri::HTML.parse(page.source)
page.css('style').first.text

# => "\n&lt;!--\n.newfont { color:red; font-style:italic }\n--&gt;\n"

If you're asserting against customisable styles, and you're using Selenium anyway, an alternative solution could involve using Javascript to determine the calculated style of an element, there seems to be no shortage of information on doing this. You could use Capybara's page.evaluate_script method to invoke a piece of Javascript that would tell you what a particular element actually looks like, and that may well be more robust than comparing the CSS text (e.g. if it gets minified by the app).

edited Aug 26, 2012 at 15:51

answered Aug 26, 2012 at 15:44

Jon M

11.7k3 gold badges43 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

obmarg Over a year ago

Getting the information from page.source works perfectly, thanks! Might consider using javascript to verify calculated styles in the future, but at the moment I know exactly what to expect in the <style> so this way seems easiest.

nowk · Accepted Answer · 2012-08-26 14:58:32Z

1

page.should have_css ".selector", :text => "Some Text"
page.should have_css ".selector", :value => "Some Value"
page.should have_css ".selector", :count => 1

Or

find('.selector').value
find('.selector:nth-child(1)').value

There are a couple ways to about what you are trying. I'd take a closer look at the documentation.

Also, one thing to note, if you are trying to access these changes after a javascript event, you'll need to run this in Selenium (or equivalent). Or you could try to use Jasmine.js for this as well.

answered Aug 26, 2012 at 14:58

nowk

33.2k2 gold badges37 silver badges41 bronze badges

2 Comments

obmarg Over a year ago

Though it's is slightly more concise, this solution seems to suffer from the same problem. And I am running inside Selenium.

nowk Over a year ago

Ah, sorry, didn't realize you were going after the <style> tag. I think Jon M's solution is probably the way to go. Or you could try to get the <style> using normal methods then do a should =~ against the content. I don't think you can get each style back as nodes/objects.

Collectives™ on Stack Overflow

Checking that CSS has been updated using capybara

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related