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
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.
- 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.