Layout Testing - Web Testing

For Layout testing, I would like to know best approach

Based on link Regression Testing for Styling and Layout of Web Apps they have suggested browsershots

I would like to know if any of you have used Google Layout Detection Tool - http://code.google.com/p/fig开发者_如何转开发hting-layout-bugs/ in your projects

Please share your thoughts on verifying layout issues using automation

Thanks, Siva

This is a vague and broad question but I'll attempt to answer it:

Yes, I have used this. My thoughts are better expressed by Michael Tamm and Co. I have bug out a couple of videos that were helpful when I implemented Fighting-Layout-Bugs around five weeks ago:

http://www.infoq.com/presentations/Fighting-Layout-Bugs

http://www.testingtv.com/2010/01/18/fighting-layout-bugs/

You can use the Galen Framework for this, see an introduction here: http://holisticon.github.io/presentations/jsunconf_galen/#/

Basically you define you're specs in a DSL:

@ Overall layout | *
--------------------------
content
   visible
navbar
   visible
content
   below: navbar 370 to 410 px


@ navigation hidden on mobile | mobile
--------------------------
navbar-item-*
   absent


@ navigation shown on desktop | desktop
--------------------------
navbar-item-*
   visible   


@ Content should fit to screen size | mobile
--------------------------
content
   width: 100% of screen/width


@ Content should fit to screen size | desktop
--------------------------
content
   width: 80 to 90% of screen/width

You can find more sample code here: https://github.com/hypery2k/galen_samples