Wraith is a screenshot comparison tool, created by developers at BBC News.
Documentation • Source • Responsive News Website

What is it?

Wraith uses a headless browser to create screenshots of webpages on different environments (or at different moments in time) and then creates a diff of the two images; the affected areas are highlighted in blue.

Documentation

For instructions on how to install, set up and use Wraith and all of its features, visit the Wraith documentation.

A brief overview of how Wraith works is provided below.

Wraith modes

There are several ways in which Wraith can be used:

1. Comparison of 2 domains (wraith capture). There are also some specialist options within this mode:
   • Spidering 2 domains for changes (wraith capture when no paths property is provided in the configuration file)
   • Running several comparisons at once (wraith multi_capture)
2. Comparing the same domain over time (wraith history, then wraith latest)

Whichever mode you decide to run Wraith in, the process it follows is generally the same:

• takes screenshots of your webpages
• runs a comparison task across them
• outputs a diff PNG file comparing the two images, and a data.txt file which contains the percentage of pixels that have changed
• packages all of this up into a gallery.html, ready for you to view
• if any screenshot's diff is above the threshold you specified in your configuration file, the task exits with a system error code (useful for CI)
• the failed screenshot will also be highlighted in the gallery

Requirements

ImageMagick is required to compare the screenshots.

Wraith also requires at least one of these headless browsers:

• PhantomJS
• CasperJS (which can be used to target specific selectors)
• SlimerJS

Contributing

Please read how to contribute to Wraith.

License

Wraith is available to everyone under the terms of the Apache 2.0 open source license. Take a look at Wraith's LICENSE file.

Credits

• Dave Blooman
• John Cleveley
• Simon Thulbourn
• Chris Ashton

Selenium-Wraith

Anyone interested in integrating selenium capability with Wraith should check out Selenium-Wraith (by Andrew Tekle-Cadman of Future Visible), which was forked from BBC's Wraith on 16/04/14 and adds the following capabilities:

1. Selenium integration, both running locally on a desktop or on a selenium grid
2. Browser to browser screenshot comparison
3. Page component-based comparison

Docker-Wraith

Wraith can also be run in a Docker container. You can start it by running:

docker run -P -v /path/to/your/project/wraith:/wraithy -w='/wraithy' bbcnews/wraith

To make multiple invocations easier you can create an alias:

alias docker-wraith="docker run -P -v /path/to/your/project/wraith:/wraithy -w='/wraithy' bbcnews/wraith"

Then you can use docker-wraith to interact with your dockerized Wraith. Try running docker-wraith version to check if it is working properly.