Automated Web-Site Layout Testing

image Web-site layout, one of the many things that can keep a tester busy. Uhm…overwhelmed? So many browsers so little time… Wouldn’t it be nice if you, the mighty tester, could just review a butt-load of screen-shots of your Web application in multiple browsers on multiple platforms to make sure there are no layout issues?  Wouldn’t that be quick and efficient?


I’ve got 2 semi-solutions for you (keep in mind I’ve done little with both, so forgive an misinformation):


Litmus
“We’ve felt the pain of getting website designs to work correctly across different browsers. Not to mention designing email newsletters that work on all email clients. Litmus makes compatibility testing easier. Litmus is lightning-fast, reliable and affordable. It’s relied upon by thousands of smart freelancers and switched-on agencies; as well as big companies like Yahoo!, Facebook and eBay.


The FREE part of Litmus: Screen-shots of your site in IE 7 and FireFox 2.

The $ part of Litmus: Pay $24 a month to get 23 browsers and 14 email clients.


BrowserShots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.”


The FREE part of BrowserShots: 70 browsers on various platforms! Submissions get dumped to a queue for processing.


The $ part of BrowserShots: Pay $15 a month to get priority processing.



Both of these appear to be good services that can provide quick insight to layout problems in your site. However, as far as I can tell the two big limitations are:



  • You are limited to pages that you can navigate to via URL, which rips the grandiose dream of having a screen-shot for every page in your website (pages that require form post or special conditions to get to are not going to happen). However, Litmus does provide a step in the right direction with it’s functionality for authentication.
  • Your site must be exposed to the Web, doing little for internal Dev and QA project cycles.


I have a dream…



  • I want to screen-shot any page in my website (requires a decent engine that will allow me to get to the various pages in my site).
  • I want to screen-shot my site that is not yet published for the world (requires the service to exist within my local network).
  • Once I’ve approved an ideal layout screen-shot I want the software to determine and tell me if the other screenshots are worth looking at (by doing a statistical image comparison with a predefined pass/fail threshold).
  • I want to provide basic wire-frame definitions and have software determine if my screen-shots are within reason (by analyzing elements in the DOM and browser dimensions)
  • Get rid of screen-shots and do DOM to DOM element width and height comparisons between browsers (Come on, it’s a dream, standards compliance for all browsers (another dream) might make it possible?)

Honestly, I think the dream is doable… So many dreams/ideas, so little time.

Leave a Reply

Your email address will not be published. Required fields are marked *