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

Time: 
07/24/2015 - 14:00-07/24/2015 - 14:45
Room: 
Room A
Experience level: 
Intermediate
Session Track: 

Front-end, User Experience and Design

This track covers delivering projects focused on the most important audience—the end user. Learn how to leverage Drupal to help you keep abreast of emerging trends in the mobile, componentized Web world. We’ll show you strategies for fostering collaboration between content creators, designers, strategists, and end-users.

Speaker(s): 
lhridley
Slides: 
Visual CSS Regression Testing.pdf

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

Comments