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 👀A walkthrough of Friday's visual regression testing setup, and why they built their own tool, Spectre.
Overview of four tools to use for CSS testing; slightly out-of-date
Integration to visual regression testing using AET
Tutorial on how to set up automated visual regression testing of components using Storybook and VisWiz.io.
Very in-depth look at setting up your own visual regression framework
Introduction to VRT using BackstopJS
A guide on implementing visual regression testing using BackstopJS with Node and Gulp.
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.
Example of using VRT for testing content migrations.
A case study of testing project with BackTrac.
An introduction to PhantomCSS using PhantomJS, CasperJS and Grunt.
Introduction to VRT using Resemble.js
Somewhat out-of-date tutorial on integrating Wraith with TravisCI
Introduction to VRT with WebdriverCSS
Introduction to VRT and ShoovIO
A case study of one team's adventures in functional testing with WebdriverIO.
An look at what it takes to roll your own VRT framework
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.
How I used Percy to redesign Percy without breaking a sweat.
A Q&A with BBC News and Wraith developer David Blooman
Walkthough of Selenium automation with Webdriver.io, including automatically starting Selenium via a WebdriverIO hook
Gist looking through various testing tools, similar to this website
Pantheon dives deep in to installing and running Wraith, including some of the extra options available with the tool.
Introduction to VRT with BackstopJS for Angular applications.
Introduction to VRT and PhantomCSS
Tutorial on WebdriverCSS, ShoovIO and TravisCI integration
Story about getting started with VRT for Drupal sites with ShoovIO
Case Study of using ShoovIO on Drupal.org
Strategies for testing pattern libraries and a tutorial for using Galen Framework to test a Pattern Lab project.
In-depth introduction to VRT and Wraith
A video explaining the benefits of visual regression testing, how Percy adds a visual review and approval service, and integrates with GitHub pull requests.
A video about PhantomCSS
Meetup recording of presentation on WebdriverIO's visual regression testing suite
Live coding session going through wdio-screenshot and blink-diff
A livestream recording going through the various versions of WebdriverCSS and WebdriverIO
Live screencast going through the Visual Regression service in WebdriverIO
(No longer supported) Huxley is a test-like system for catching visual regressions in Web applications
Java based tool for visual regression testing, supporting W3C and accessibility validators and even more.
A lightweight CLI tool for visual regression testing
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.
Website Visual Monitoring and Testing Platform
A visual regression testing tool that analyzes your html and css to explain why changes have occurred.
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.
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.
A simple API to quantify and visualize differences
API/UI wrapper for PhantomJS screenshotting. Built in Python.
Screenshot and DOM change comparison using headless Chrome and Google puppeteer.
A different spin on VRT, Galen tests the location of objects relatively to each other on page.
Selenium-based testing suite with API/UI functionality and full-featured tests.
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.
A command-line tool that runs test assertions based on computed CSS of your site, comparing them to expected style definitions.
Built on top of PhantomCSS, adding new features like annotations for each screenshot and a viewer to compare and choose the correct screenshots.
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.
A test-runner for image comparisons that is built on top of Blink-Diff
Ruby based tool to automatically test the design of your webapp.
A wrapper around Nightmare.js to look at your UI changes in prod before deploying to prod.
Faster, more user friendly visual regression testing.
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.
A CasperJS module for automating visual regression testing with PhantomJS or SlimerJS and Resemble.js.
Node.js Visual regression test tool.
Command line tool built to find image-based differences between website updates. Based on Succss.
Web-based visual regression testing tool that combines screenshot images with DOM and CSS verifications. Does not require coding. Based on visual comparisons.
UI/API interface for managing results of WebdriverIO/WebdriverCSS tests.
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 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.
Command line tool built to find image-based differences between website updates. Succss relies on npm and is installed globally.
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 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.
This plugin is an automatic visual regression-testing tool for WebdriverIO. It was inspired by James Cryer's awesome project called PhantomCSS.
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.
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.