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

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.

BackTrac

Website Visual Monitoring and Testing Platform

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.

Dpxdt

API/UI wrapper for PhantomJS screenshotting. Built in Python.

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.

Hardy

A command-line tool that runs test assertions based on computed CSS of your site, comparing them to expected style definitions.

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.

SiteEffect

All-in-one tool promising quick set up with no test writing. Simply plug in your desired URLs and siteeffect will start watching for visual changes.

Succss

Command line tool built to find image-based differences between website updates. Succss relies on npm and is installed globally.

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

Automating visual regression testing

At it’s most basic, Visual regression testing is a series of tests that can run through your site, taking screenshots and comparing those screenshots against a baseline, alerting you when things change.

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.