Wraith..A Visual Regression Tool to catch the Faint Traces of UI Changes per Build.

Detailed overview of the session 

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

2. In a slight departure from the standard image-diff process, Wraith compares two websites when testing where the first reference can be the Live (Stable) version of the site and the other can be Dev or the Staging Environment. This enables us to catch and compare the unwanted UI issues that may get skipped by the QA team or individual.

3.  Normally, images are rendered and saved as 'reference cases' so that the testing tool tests a single target against the known layout. This tool generates the reference case live from one of the supplied sites then compares the other site to it.

4. This technique minimises the impact of dynamic content changes on the rendered images by making it possible to pull in the same live content into both sites.

5. The Comparison can be made across the different screen sizes and is easily customisable as this tool runs on the Headless browsers like PhantomJS, CasperJS or SlimerJS.

To Understand More  :

- The tool is 2 parts, the capturing, using a headless browser and the comparing, using Imagemagick.  PhantomJS is a headless browser designed exactly for these types of tasks.  It doesn’t have a UI, all your settings are applied on the command line. We can use PhantomJS to capture multiple resolutions, so RWD testing is made much easier.  An alternative is SlimerJS, this is another headless browser.  It is not out of the box headless on some operating systems, so is not as simple to setup as PhantomJS.  

- The good thing is that it is essentially a clone of PhantomJS, so all settings will work with both browsers.  
The main difference between the two browsers is webkit and Gecko, PhantomJS being Webkit and SlimerJS being Gecko.  This means that you can test across two rendering engines.  By default, we have set up Wraith to use PhantomJS, this is due to the extra configuration to make Slimer headless.  

- Using Wraith, you can see where your website really breaks by starting to put in resolutions you don’t normally consider.  Each screenshot has it’s file name comprised of the resolution and the environment you’re grabbing the screenshot from, the individual web pages will label the folder so all your screenshots will be grouped.  

Note : I'll be showing the Attendees how to implement this tool on different OS i.e Windows/Ubuntu/Mac  as there is not much documentation of wraith available online and even if it is it's a bit outdated. I will also be giving a demo of how i implemented this so easily on the Site I was working on and will explain different parts/components of the Wraith Script (.yaml file).

What level of knowledge should attendees have before walking into your session.

This easy to understand, implement and integrate tool will sweap the QA engineers/beginners off their feet throughout the world.

Not much pre-requisites are there but Attendees are expected to have a little basic knowledge about PhantomJS, CasperJS and SlimerJS.

What will your session accomplish and what will attendees walk away having learned

Attendees will now be able to Capture and Implement this easy to integrate tool which solves the problem of Dynamic data or Changes in the UI causing other regressions throghout the site and Capture them earliest to reduce the cost of fixing regressions at the later stage of development.