Introduction
Visual Regression
Test Automation

Visual Regression

Posted by Abhishek Tiwari Abhishek Tiwari on
Cite the post
Citation Copied

A new breed of tools have started appearing on our radar supporting the very idea of automated visual regression. A visual regression testing tool performs front-end or user-interface(UI) regression testing by capturing the screenshots of web pages/UI and compare them with the original images (either historical baseline screenshots or reference images from live website). If new screenshot deviate from baseline or reference screenshot, visual regression tool will warn you. In context of web applications, visual regression tools are performing regression test on CSS changes.

It is important to note that screenshot based visual regression testing can only work when UI behavior is predictable. Mutable UI components should be normally excluded from visual regression. Visual regression tools works really well for testing the web applications, responsive layouts etc.

Visual regression tools also provide simple image diff functionality which compares new and original image and outputs a third diff image. For image comparison these tools rely on the image libraries such as ImageMagic, Python Image Library(PIL), Resemble.js etc. This functionality is a key differentiator for visual regression tools.

For a more fine level image comparison - smallest pixel or slightest color change, tools like Kaleidoscope[1] can be used. Tools like Kaleidoscope makes reviewing screenshot files much easier and quicker.

For screenshot capturing visual regression tools either use Selenium WebDriver or a headless browser such as PhantomJS. Visual regression tools are DevOps friendly and can be used with your existing continuous integration and delivery setup. As part of process, screenshots can be checked into your version controlled repository. It can allow visual review of the UI changes as part of your existing code review process.

To this end I have found three visual regression testing tools those fits above mentioned criteria,

Wraith

Wraith is a screenshot comparison tool, created by developers at BBC News [2]. It compares screenshots from live website to staging or test environment[3]. Wraith uses ImageMagic to compare images. Wraith allows to vary the resolution and enables to test breaking point.

Wraith Image Diff

Huxley

Huxley is developed by Facebook team for visual regressions in web applications[4]. It compares captured images to baseline images.

PhantomCSS

PhantomCSS[5] automates visual regression testing with PhantomJS and Resemble.js[6].

  1. http://www.kaleidoscopeapp.com/ ↩︎

  2. http://responsivenews.co.uk/post/56884056177/wraith ↩︎

  3. https://github.com/BBC-News/wraith ↩︎

  4. https://github.com/facebook/huxley ↩︎

  5. https://github.com/Huddle/PhantomCSS ↩︎

  6. http://tldr.huddle.com/blog/css-testing/ ↩︎

Written in collaboration with: Abhishek Tiwari
Abhishek Tiwari
Author

Abhishek Tiwari

https://www.abhishek-tiwari.com/

Tech Savant, Servant Leader

View Comments
Next Post

Embracing change when on peak
Previous Post

CloudFront Design Patterns And Best Practices

Subscribe to Abhishek Tiwari

Subscribe to our newsletter and receive access to exclusive posts and content updates. We don't spam and your email won't be shared with third-parties.

Thanks for subscribing!

Check your inbox to confirm your subscription.

Please enter a valid email address!