Open Source JavaScript Visual Regression Testing Tools

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

There are a few visual regression tools for the web, but most either cannot be run headless or use phantomjs which is deprecated and a browser nobody is actually using. They usually also require you to maintain fixtures. With react-native it's now possible to target multiple platforms with a single code base, but there's no single tool to test all to my knowledge. Loki aims to have easy setup, no to low maintenance cost, reproducible tests independent of which OS they are run on, runnable on CI, and support all platforms storybook does.

A lightweight command line tool for visual regression testing of UI components. After installing, you want to tell argus eyes which pages and which components to check for visual regression. Argus eyes work by going over a straightforward JSON file containing the resolutions you want to capture, as well as the pages with theirs url's, and the components with their CSS-selectors. Once argus eyes know where to find the components, it's time for some command line action. The first command you want to use is $ argus-eyes capture master. This makes argus eyes go over the config file and take screenshots of all specified components in there. The screenshots are saved in .argus-eyes/master and this set of screenshots can be compared with another set.

Aye Spy is a high-performance visual regression tool to catch UI regressions. Aye Spy takes inspiration from existing projects such as Wraith and BackstopJs. We have found visual regression testing to be one of the most effective ways to catch regressions. It's a great tool to have in your pipeline, but the current solutions on the market were missing one key component we felt was essential for a great developer experience performance.

Visual regression testing for web apps. Supports screen rendering with Chrome-headless. Add your own interactions with the Playwright and Puppeteer scripting. BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.

A lightweight tool for regression testing of Cascading Style Sheets. Your web stack should be fully testable. CSS Critic closes the gap in front-end testing and makes HTML & CSS testable - no more broken UI. For example, make it supervise changes to your project's responsive style guide so you know things are looking good. We believe that your UI will change often enough that a lightweight process on managing changes (near instant feedback, anyone?) is more important than a heavy-weight one which could offer tighter control. Also, CSS Critic aims at bridging the gap between user experience (UX) people and (UI) developers. You probably won't find an easier way of sharing your UI tests than the simple web page that CSS Critic basically is. And don't feel put down by the "CSS" bit, you may throw anything at it that can be converted into a simple image.

Cypress Image Snapshot binds jest-image-snapshot's image diffing logic to Cypress.io commands. The goal is to catch visual regressions during integration tests.

Module for adding visual regression testing to Cypress.

Gemini is a utility for regression testing the visual appearance of web pages. Each of the blocks that are being tested may be in one of the determined states. States are tested with the help of chains of step-by-step actions declared in a block's test suites.

Happo is a visual regression testing tool. It hooks into your CI environment to compare the visual appearance of UI components before and after a change. Screenshots are taken in different browsers and across different screen sizes to ensure consistent cross-browser and responsive styling of your application. The first thing you want to do is to set up a test suite for Happo. A test suite consists of a set of components and variants of those components. There are many ways to do this, and it all depends on your existing tech stack, your application, your experience with other test frameworks, and more.

Hermione is a utility for integration testing of web pages using WebdriverIO and Mocha. If you are familiar with WebdriverIO and Mocha, you can start writing and running tests in 5 minutes! You need to install Hermione via npm and add a tiny config to your project. When tests are run one by one, it takes a lot of time. Hermione can run tests in parallel sessions in different browsers out of the box. Running of too many tests in parallel can lead to the overloading of the main process CPU usage which causes degradation in test passing time, so Hermione runs all tests in subprocesses in order to solve this problem.

Nightwatch Visual Regression Testing tools for nightwatch.js. Nightwatch VRT extends nightwatch.js with an assertion that captures a screenshot of a DOM element identified by a selector and compares the screenshot against a baseline screenshot. If the baseline screenshot does not exist, it will be created the first time you run the test and the assertion will pass.

CSS regression testing. A CasperJS module for automating visual regression testing with PhantomJS 2 or SlimerJS and Resemble.js. For testing Web apps, live style guides, and responsive layouts. PhantomCSS takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for rgb pixel differences. PhantomCSS then generates image diffs to help you find the cause. Screenshot based regression testing can only work when UI is predictable. It's possible to hide mutable UI components with PhantomCSS but it would be better to test static pages or drive the UI with faked data during test runs.

A visual regression testing library/tool, aims to quickly automate browser-based tests with minimum development overhead. To test flexibly in different testing scenarios, either testing against web UI wired with backends or just static web pages, VBot exposes API to be used with testing frameworks like mocha or ava, etc. Therefore, the test data variables can be updated according to different conditions, in order to decouple from real backends and avoid false negative results.

A Jest plugin for creating screenshots of React components with a little help of Puppeteer. A jest-puppy-shots is a Jest plugin that can help you create Visual Regression tests for your React components. If you ever used Enzyme or Snapshots you will love the jest-puppe-shots. The Snapshot testing approach is really awesome but it has one downside: it cannot be used to make visual regression tests of your components. Thanks to the Puppeteer API it's now possible to use the Chromium browser in Jest and create real screenshots of your components.