Wouldn't it be great to have a perfect set of eyes reviewing every global CSS change you ever make? An exact front-end safety check that lets you know, in a pixel perfect way, when something's unexpectedly different? Thanks to visual regression testing tools, this is not only possible, but can be easily setup with just a few configuration tweaks. This is something you can add to your workflow today.
What is Wraith?
Wraith is a visual regression testing tool that can crawl your website, take responsive sets of screenshots, and create image galleries with comparisons. This is what a Wraith gallery looks like:
In the above gallery, note the bottom right "diff" image shows a 1.83% change with blue highlights. Wraith caught a menu item difference in the 600px version of the page!
How It Works
Visual regression testing uses screenshot comparisons to find unexpected changes. For example, in the first two screenshots below, I've tweaked the content links to change them from blue to green. I then created a third comparison image that highlights the differences in red.
The process of taking these screenshots, comparing them, and highlighting the differences, is easy to set up.
Wraith can also capture portions of a website in isolation using selectors. Here's a gallery of headers at different viewport widths:
Compare Your Pantheon Sites
Wraith will crawl, capture, and compare pages from two websites you specify. This lets you compare your Pantheon Dev and Test sites, or your Test site against Live. Each time Wraith runs it compares the pages on both sites and creates a gallery that shows the differences. Wraith can also run in a history mode that captures a single website and visually tests it against previous baseline captures.
Wraith can also be easily automated. When Wraith runs, it creates a text file for each set of image comparisons. This file contains a number that shows the amount of difference between images. You can put checks for these numbers into your build and notification tools.
Set Up Wraith
Wraith is extremely simple to set up and only takes a few minutes to configure and run. Check out my guide for more details about using Wraith with Pantheon.
: Website Technology, Development, Guides and Tutorials, Training and Education, Education, Drupal, WordPress