Wraith for UI Testing

Overview

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.
https://github.com/BBC-News/wraith

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.

Selection_376

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

Selection_377

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.

Selection_379

Execute Wraith

  • wraith capture capture

Selection_380

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

Selection_381

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.

Selection_383Selection_384Selection_385

Summary

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.

Advertisements

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

WordPress.com.

Up ↑

%d bloggers like this: