Visual/CSS Regression Testing -- Catching the "unintended consequences" of modifying your theme

Room: 
Room 201

Have you ever spent hours poring over a web application when making changes to the theme, looking for the consequences of CSS style rules that are too broad?  Ever made changes to a client's website, only to find out the theming for the newly designed front page totally screwed up the formatting on the product pricing page -- after you deployed the changes?

You are not alone.

Manual testing of user interfaces for visual and style components is a tedious and time consuming process, and by very nature introduces the human error aspect to web application QA review.  While tools such as Behat have made testing certain aspects of the user interface less tedious, and have removed some of the "human error" aspect from the process, Behat doesn't provide the capability of testing the "layout" of site changes for those unintended consequences of misapplied HTML, CSS or Javascript.

Enter PhantomCSS -- a framework for conducting automated visual regression testing for websites.  In this session we'll cover:

  • What is PhantomCSS?
  • System Requirements for PhantomCSS
  • Skillset Requirements to write test suites for PhantomCSS
  • How can I use PhantomCSS to improve my QA process?
  • Live demonstration of a PhantomCSS test suite, including a review of the output of test results

 

Slides from presentation:  http://www.slideshare.net/lhridley/visualcss-regression-testing-catching...

Speaker(s): 
Track: 
Front End

Comments

Great session!  Just the righ level of detail and good examples.  Thank you so much!