IT'S TIME TO RETHINK THE WEBSITE RELAUNCH Learn to iterate on your digital experience Get the Ebook

Visually Test Your Website With Wraith

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.

Dynamic Content

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.

Automated Testing

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.

This post is based on Kate's presentation at DrupalCon 2015. Watch the video here or view the presentation slides.

Topics Website Technology, Development, Guides and Tutorials, Training and Education, Education, Drupal, WordPress

Let’s get in touch