Visual Regression Testing

Learn Visual Regression Testing with a free 6-day email course on WebdriverCSS.

Have a look   👀

Articles

Automating Visual Regression Tests

In this blog post we’re going to focus on the top end of the triangle, looking at ways to improve implementation and execution time as well as adding extra value to our tests.

Videos

Tools

Huxley

(No longer supported) Huxley is a test-like system for catching visual regressions in Web applications

AET

Java based tool for visual regression testing, supporting W3C and accessibility validators and even more.

Argus Eyes

A lightweight CLI tool for visual regression testing

Axcept

Axcept helps you to spot every bug by visually comparing screenshots. No matter if it's an unwanted UI change or a broken feature. Run up to 100 tests in parallel ⚡️

BackstopJS

BackstopJS is a config-driven automated screenshot test application for responsive websites and web-applications. Specify a set of DOM elements and viewport sizes and BackstopJS will work like an extra set of eyes on your workflow.

ButterflyFX

A visual regression testing tool that analyzes your html and css to explain why changes have occurred.

Chromatic

Chromatic is a screenshot testing & review tool for UI components and component libraries. It seamlessly integrates into your PR and CI workflow to notify you of UI regressions. Perfect for Storybook.

csscritic

PhantomJS/SlimerJS-based tool which checks your current layout constantly against a reference image you have provided in the past. If your layout breaks (or simply changes - CSS Critic can't tell) your tests fail.

Diff.io

A simple API to quantify and visualize differences

Differencify

Differencify is a library for visual regression testing by comparing your local changes with reference screenshots of your website. It is built on top of chrome headless using Puppeteer.

Diffy.website

SaaS platform that takes screenshots of your webpages and compare with custom algorithm. Perfect for smoke testing your visual changes, Drupal / Wordpress updates. Takes 5 minutes to configure.

Fluxguard

Screenshot and DOM change comparison using headless Chrome and Google puppeteer.

Galen Framework

A different spin on VRT, Galen tests the location of objects relatively to each other on page.

Gemini

Selenium-based testing suite with API/UI functionality and full-featured tests.

Ghost Inspector

All in one tool that provides a visual editor (a free Chrome recorder extension) which allows you to record operations and assertions right in your web browser. Run the tests on a regular basis via their site.

haunterjs

Built on top of PhantomCSS, adding new features like annotations for each screenshot and a viewer to compare and choose the correct screenshots.

Applitools Eyes

Cloud based software testing tool which integrates with many testing toolsets out there (including WebdriverIO/WebdriverCSS), providing additional functionality and an UI/API for managing test results.

Kobold

A test-runner for image comparisons that is built on top of Blink-Diff

Lineup

Ruby based tool to automatically test the design of your webapp.

mirror-mirror

A wrapper around Nightmare.js to look at your UI changes in prod before deploying to prod.

Ocularjs

Faster, more user friendly visual regression testing.

Percy.io

Percy adds a visual review and approval service to your UI snapshots. It integrates directly into your GitHub pull requests, providing just in time visual regression testing.

PhantomCSS

A CasperJS module for automating visual regression testing with PhantomJS or SlimerJS and Resemble.js.

reg-cli

Node.js Visual regression test tool.

Rockcss

Command line tool built to find image-based differences between website updates. Based on Succss.

Screener

Hosted visual regression testing with powerful integration with Storybook (React/Vue/Angular etc).

Screenster

Web-based visual regression testing tool that combines screenshot images with DOM and CSS verifications. Does not require coding. Based on visual comparisons.

ShoovIO

UI/API interface for managing results of WebdriverIO/WebdriverCSS tests.

VisualReview

VisualReview's goal is to provide a productive and human-friendly workflow for testing and reviewing your web application's layout for any regressions.

VisWiz.io

VisWiz.io is a flexible visual regression testing service. Easy to use SDK/API. Use together with your preferred testing framework. Get results on email, in Slack or via webhooks.

WebdriverCSS

This plugin is an automatic visual regression-testing tool for WebdriverIO. It was inspired by James Cryer's awesome project called PhantomCSS.

Talks

Visual Regression Testing - from a tool to a process

In this talk I will discuss how I converted PhantomCSS, a tool for visual regression testing, and integrated it into our workflow. I will also cover the challenges we faced which ranged from integrating the tests into our CI, test execution taking too long, ability to browse the test results and notifying developers about failed regressions.