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.
The 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/
banoodle land 