<VR>

  • Home
  • Talks
  • Podcast
  • Blog

Automated Responsive visual diffs with Wraith

Published on Mar 10, 2014

🚀2 mins to read

  • notes
  • articles
  • work
  • remote work
  • process
  • demos

BBC’s team put up a neat plugin called Wraith to automate responsive visual diffs. Its helpful to include visual diff’s into your build system and workflow. The biggest advantage is, if you fiddling around code and there’re minuscule changes of 1px, its hard for the human eye to pick it up.

An example use case for working on a legacy applications. You’re editing CSS for a change in a particular screen. If you’re afraid this change might break things in other screens/pages, use wraith. These visual diff’s help by picking those and pointing them out to you. You still have to go through these images manually but its a whole lot easier to pick major differences. Especially, ones you did not intend to make.

The other major advantage using BBC’s Wraith is that it does responsive screenshots. Wraith checks your site in different viewport widths and compares it with production (or another URL you point it to). Its pretty neat and helps ensure you didn’t unintentionally break something.

The config yaml file is super simple and human readable that it took a jiffy to set this baby up and capture diffs. It uses phantom headless (webkit) to traverse pages, resize viewport and capture screenshots. It uses imagemagick to do the image processing.

What’s not mentioned in a lot of places is, once the diff capturing is done, it gives you a cool UI to browse these diff images. You have access to screenshots from both environments and the diff image. These are neatly categorized by the pages. Thrilling!

Below, I have documented my process of setting it up and getting it to work

  1. Download and install Imagemagick
  2. Download PhantomJS

Then, unzip it in the folder where you want to run wraith from. I put it in my root/tools/visualDiff folder3. Then configure your YAML file. Its simple and readable.a. I put in URLs for my int and production environments.    b. Add paths you want to test    c. Add responsive breakpoints at which you want to test.4. Run the command

wraith capture <your-config-file>

Issues faced:

  1. I had placed phantomjs in a separate folder of its own at first but that didn’t work. So I put the executable phantomjs exe file at root and it worked
  2. There was some weird file permission issue that didn’t allow wraith to create a shots folder. So I manually created it and that worked fine. I still have issues when I run wraith, because it flushes that directory and deletes it. Then creates a new one with the same name. I am on a windows machine so maybe that’s a problem?

But that’s pretty much it. Its a sweet tool that I recommend you incorporate into your frontend tool pipeline. There’s also a neat grunt plugin if that’s your kind of thing

I am currently figuring out how to use this and work around pages that require login or closing a modal.

Soon, we will also have the percentage of diffs available.

Built with passion...

React

Used mainly for the JSX templating, client-side libraries and job secruity.

Gatsby

To enable static site generation and optimize page load performance.

GraphQL

For data-fetching from multiple sources.

Contentful

CMS to store all data that is powering this website except for blogs, which are markdown files.

Netlify

For static site hosting, handling form submissions and having CI/CD integrated with Github.

Images

From unsplash when they are not my own.

..and other fun technologies. All code is hosted on Github as a private repository. Development is done on VS-Code. If you are interested, take a look at my preferred dev machine setup. Fueled by coffee and lo-fi beats. Current active version is v2.11.3.

</VR>