Meet the Friendly Ghosts: Casper, Phantom, Slimer and Wraith.

This summer’s “Ghost Busters” movie was about naughty ghosts getting busted, but we’re going to discuss some very friendly and helpful “ghosts” who do some busting of their own: they bust (or detect) visual regression bugs on your website.

A visual regression bug is a style defect that is unintentionally introduced to the site, usually when a well-meaning developer changes some other styles. Unless you test every page (and every resolution) of the site every time you make a style change, these regression bugs can go unnoticed and get deployed to your live website.

Conducting this much manual testing on regular basis would be quite costly. It would also not be very reliable because humans often overlook slight variations in typography and layout.

Fortunately, this is where our friendly “ghosts” come in. Casperjs, Phantomjs, Slimerjs and Wraith are automated testing utilities that allow us to quickly and reliably compare a live website with a development copy (or a historical baseline) of that site. These tools view the pages of your website at any number of specified widths (or “breakpoints”), taking screenshots of each. The screenshots are then compared (“diffed”) pixel-by-pixel and any differences are highlighted.

While you can certainly use casperjs, phantomjs and slimerjs without Wraith, using it greatly simplifies getting started with writing your own test configurations

The results of these tests are output into a convenient, temporary local “website” which can be quickly reviewed by developers and other stakeholders. Some highlighted differences will be the intentional changes that were made, so the reviewer would ignore those “failed” tests. But highlighted differences that aren’t supposed to be there will be obvious, no matter how subtle that change is.

Below is an example of how these test results look. This example just checks 4 pages of this fictitious website at 2 different breakpoints, but real scripts can cover hundreds of pages and many different breakpoints. Tests can also capture just one section of a webpage, for example, just a drop down menu in its active state.

fullscreen-diffThe scripts are highly configureable and because every website is unique, I create and maintain a suite of these tests for each site I manage.

These tools can also be used for Automated Functional Regression testing and for building interactivity into your visual regression tests. For example, I add a js script that clicks on the menu so that my script can capture a screenshot of the expanded megamenu on a site.

While you can certainly use casperjs, phantomjs and slimerjs without Wraith, using it greatly simplifies getting started with writing your own test configurations since the maintainers (the WebDev team over at BBC) have kindly provided examples and documentation. The Pantheon documentation listed below is an excellent entry point as their step-by-step instructions are fool-proof (and they work whether or not you work with the Pantheon platform). You can literally be up and running with this in under 30 minutes.

Resources

http://bbc-news.github.io/wraith/configs.html

https://pantheon.io/docs/guides/visual-diff-with-wraith/

http://docs.casperjs.org/

http://phantomjs.org/api

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s