Monday, November 24th, 2008

CSS Testing via Selenium

Category: CSS, Testing

Gareth Rushgrove has published some code for CSS Test, code that lets you get in there and test resulting CSS:

CSS is hard to test automatically. Their appear to be two potential approaches
which might have merit in solving this problem and and this sample code
represents one of them.

The basic idea here resolves around programatic comparison of images, some
based on screen shots and others generated dynamically from URLs. The
capability to analyse only a segment of a page has also been included.

The overhead introduced by the need to take screenshots of a site makes this
technique more useful for spotting regression issues in a live site than for
a test driven approach to writing CSS. Tools will be provided to make this
easier at a later date.

As this is currently a proof of concept in that it only supports testing in
webkit, and even then only on OS X. Support for other browsers relies on
other screen grab tools being integrated into the code.

This is not intended as a tool to check whether a finished website looks
identical to a set of photoshop images. It’s intended to spot changes in
unexpected areas of a sites layout or design.

Here is a sample test:

  1. def test_assert_image_and_url_segment_same(self):
  2.         image = "sample/localhost8000-segment.png"
  3.         url = "http://localhost:8000"
  4.         segment = "500x500+200+200"
  5.         self.assert_image_and_url_segment_same(image, url, segment)

Here we plan on using Selenium to extract rendered DOM values like text-size
from a given web page and compare them against expected values. This could be useful both for regression testing and for assertion based test driven

Here is a sample test:

  1. def test_assert_text_size_for_h1(self):
  2.         browser = self.browser
  4.         self.failUnless(browser.is_element_present("css=body"))        
  5.         self.assert_text_size("h1", "20.8px")

The sample code is written in Python but other implementations would be
straightforward. Much of the actual work is done via other commands; namely
webkit2png by Paul Hammond and the Imagemagik suite of tools.

Posted by Dion Almaer at 6:44 am

3.6 rating from 17 votes


Comments feed TrackBack URI
In case someone is interested. WatiN is a free and open source test framework which together with nUnit kicks ass big time…!
We’re using it for automated tests in Ra-Ajax…

Comment by ThomasHansen — November 24, 2008

@Thomas: You’ve lost it, turning every post into an opportunity to promote your framework. You’ve had your post, so no need to force the framework onto people, it makes you look desparete trying to sell a couple commercial licenses. If you don’t like what’s posted on Ajaxian go somewhere else. I’m probably just wasting my time since you are not going to stop this trolling untill Dion tells you to.

Comment by lovejs — November 24, 2008

I think this one was pretty justified featuring a video of an automated Ajax testing framework (not mine)…?
Beside I don’t sell “commercial licenses” of Ra-Ajax. Ra is LGPL. What I sell “commercial licenses” of is the Starter-Kits. They too are LGPL in case you think $29 is too expensive…
But I see you point, just not in regards to THIS comment…

Comment by ThomasHansen — November 24, 2008

Leave a comment

You must be logged in to post a comment.