How we do visual regression testing
A walkthrough of Friday's visual regression testing setup, and why they built their own tool, Spectre.
Learn Visual Regression Testing with a free 6-day email course on WebdriverCSS.
Have a look 👀Articles
4 tools for automatic CSS testing
Overview of four tools to use for CSS testing; slightly out-of-date
Automate your regression with open source software
Integration to visual regression testing using AET
Visually Test Your Components with Storybook and VisWiz.io
Tutorial on how to set up automated visual regression testing of components using Storybook and VisWiz.io.
Automatic visual diffing with Puppeteer
Very in-depth look at setting up your own visual regression framework
Automating CSS Regression Testing
Introduction to VRT using BackstopJS
Automating visual regression testing
A guide on implementing visual regression testing using BackstopJS with Node and Gulp.
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.
Testing migration
Example of using VRT for testing content migrations.
Why to automate CSS testing?
A case study of testing project with BackTrac.
CSS Testing with PhantomCSS, PhantomJS, CasperJS and Grunt
An introduction to PhantomCSS using PhantomJS, CasperJS and Grunt.
CSS Regression Testing with Resemble.js
Introduction to VRT using Resemble.js
Easy UI Regression Testing with Wraith and TravisCI
Somewhat out-of-date tutorial on integrating Wraith with TravisCI
How to automate a visual regression test
Introduction to VRT with WebdriverCSS
How We Could Monitor Twitter (if We Had To)
Introduction to VRT and ShoovIO
Adventures with automated browser tests in JavaScript
A case study of one team's adventures in functional testing with WebdriverIO.
Implementing a visual CSS testing framework
An look at what it takes to roll your own VRT framework
Improving Communication and Confidence With Visual Snapshot Testing
How visual snapshot testing changed the way of working for a team in Klarna - how it improved communication within the team and outside it, and boosted the team's confidence in changes they make.
Redesigning with confidence
How I used Percy to redesign Percy without breaking a sweat.
Responsive Css Testing Made Simple With The Bbc’s Wraith
A Q&A with BBC News and Wraith developer David Blooman
Setting up Selenium tests with Webdriver.io
Walkthough of Selenium automation with Webdriver.io, including automatically starting Selenium via a WebdriverIO hook
Survey of screenshot-based CSS testing tools
Gist looking through various testing tools, similar to this website
Using Wraith for Visual Regression Testing
Pantheon dives deep in to installing and running Wraith, including some of the extra options available with the tool.
Visual Regression Testing For Angular Applications
Introduction to VRT with BackstopJS for Angular applications.
Visual Regression Testing with PhantomCSS
Introduction to VRT and PhantomCSS
Visual Regression Tests On Every Commit
Tutorial on WebdriverCSS, ShoovIO and TravisCI integration
Visual Regression Tutorials
Story about getting started with VRT for Drupal sites with ShoovIO
Visually Monitoring Drupal.org
Case Study of using ShoovIO on Drupal.org
Why and How to Test Your Pattern Library
Strategies for testing pattern libraries and a tutorial for using Galen Framework to test a Pattern Lab project.
Wrestling with Wraith - Quick and Dirty Visual Regression Testing
In-depth introduction to VRT and Wraith
Videos
Visual regression testing, review, and approval with Percy
A video explaining the benefits of visual regression testing, how Percy adds a visual review and approval service, and integrates with GitHub pull requests.
Sass Bites #73 - Visual Regression Testing with PhantomCSS
A video about PhantomCSS
Visual Regression Testing - Hill Country JS
Meetup recording of presentation on WebdriverIO's visual regression testing suite
Visual Regression Testing with wdio-screenshot - WebdriverIO Wednesdays
Live coding session going through wdio-screenshot and blink-diff
WebdriverCSS Livestream Recording
A livestream recording going through the various versions of WebdriverCSS and WebdriverIO
WebdriverIO Visual Regression Service - WebdriverIO Wednesdays
Live screencast going through the Visual Regression service in WebdriverIO
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
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.
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.
Spectre
Spectre is a web application to diff screenshots. It's heavily influence by VisualReview, BackstopJS and Wraith. Read more about how we use it at Friday in our blog post: How we do visual regression testing.
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.