Wraith for UI Testing


Wraith is a screenshot comparison tool, created by developers at BBC News.

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.

How to configure

Wraith stores its configuration within a self-generated YAML file.
First, create a directory:

  • mkdir wraith
  • cd wraith

Then, generate a Wraith YAML configuration file and browser navigation script:

  • wraith setup
  • Run Wraith

To increase the reliability of your screenshot captures by changing the browser timeout in file javascript/wait–phantom.js.


Next, the configs/capture.yaml file will need to be modified to crawl and capture your websites.


Also need to add navigation paths in configs/capture.yaml for Wraith to crawl.

Selection_378Update the global before_capture: hook and replace its value with the javascript/wait–phantom.js script you updated.


Execute Wraith

  • wraith capture capture


Open wraith/shots/gallery.html to view the results.


One important point is the screen size. This gives you the ability to test responsive sites. If all you care about is how things look on a 1024px browser then you can remove all of the lines but that one. But assuming you care how your site looks anywhere from tiny mobile resolutions to huge desktop resolutions.



Wraith is missing some features. As far as I know, if you have any dynamic actions on your page (e.g. tabs), you have to implement your own way to access those actions (so that a screenshot can be taken of that particular view). Also, since its default is to capture a screenshot of the entire page, any vertical alignment change at the top of the page can cascade down to everything below it.

That said, it’s a great solution to getting started with UI regression testing.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: