Event: 
Florida Drupalcamp 2015
Speaker: 
Parent Track: 
Design, Theming, & Front-end Development
Audience: 
Intermediate

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

FOLLOWUP:  For those of you interested, here is a link to the test suite example I used in the demonstration:  https://gist.github.com/lhridley/b8dd4e5605b0e559b4dd

And since our sessions were running behind and we got cut off early, here is a link to the recording from Drupal MidCamp 2015, where the same presentation was made a few weeks earlier:  https://www.youtube.com/watch?t=2963&v=WtJwqqLdSkY