Screenshooting the Web Browser
Filed under: Development, Test
By Thomas Herchenröder @ January 25, 2008 7:54 pm
If you are thinking about testing web apps, you might get interested in taking and comparing screen shots. I've been involved with Selenium RC a bit these days, a test automation tool for web apps. Selenium RC (or SRC for short) offers a captureScreenshot facility. The problem was: If you want to compare images mechanically, you want to make sure they contain only what you are interested in - the web page under test. The SRC command captures the whole screen. So I put a bit of time and effort into having SRC take screen shots from the browser page only. If possible, no desktop, no other windows, no chrome. This makes the screen images smaller and rips off the visual noise that will spoil the comparisons. What we have come up with seems to work so far, and if you are interested in the technical details, surf over to a post on Selenium RC's user forum.
If this works out nicely we might set up a test automation to test low-level and widget-level rendering capabilities of qooxdoo. With a few suitable test apps (like those from the DemoBrowser) we will run through the test once, take all the screenshots, making sure the pics taken are correct. Then run the tests automatically, taking the same screenshots again and comparing them to the master copies. Doing this again and again while developing the framework we should finally get a nice regression test. With this infrastructure you can compare the images directly (e.g. using tools from the ImageMagick suite), compare them on the basis of their digest (MD5, SHA), throw away the correct ones, keep the problematic for human inspection, create "diff" images and so on.
Sounds like fun.

Comment by ftorres
Another interesting aspect of functional testing and screen shots capture is the ability to grab screen shot in case of error.
In the next release of InCisif.net we created such kind of feature.
The screenshots are zipped and emailed to you as well as the trace file and
the xml summary report.
See our screen cast :
GragScreenShotDemo
Frederic Torres
http://www.InCisif.net
Web Testing with C# or VB.NET
January 26, 2008 8:59 pm
Comment by Thomas Herchenröder
@ftorres: Yep, taking screen shots in case of error is a common use case, and pops up on the SRC forum. But I haven’t found any hint using screen shots in less-than-obvious cases, where the image is actually used as kind of a “return value” of a function and then checked against an expected value to validate correctness.
Will be checking out your demo.
January 28, 2008 10:40 am
Comment by Helder Magalhães
Great idea!
Apache Batik has an analogous set of tests [1], whose infrastructure can possibly used as inspiration.
[1] http://xmlgraphics.apache.org/batik/dev/test.html
January 30, 2008 6:32 pm
Comment by Thomas Herchenröder
@Helder, thanks for the pointer, I’ll have a look at it.
January 31, 2008 10:21 am