15 Useful CSS Regression Testing Tools

CSS Regression Testing is a set of automated tests to compare visual differences on websites. CSS regression testing always been a challenge to UI developers. The advent of rich UIs and responsive design has made it next to impossible to efficiently test web applications and websites without focusing on CSS and visual layouts. So here in this post we have 15 Useful CSS Regression Testing Tools that will guard your web application against visual bugs.

BackstopJS

It automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.

BackstopJS

Resemble.js

It can be used for any image analysis and comparison requirement you might have in the browser. However, it has been designed and built for use by the PhantomJS powered visual regression library PhantomCSS. PhantomCSS needs to be able to ignore antialiasing as this would cause differences between screenshots derived from different machines.

Resemble.js

jsdifflib

A javascript library for diffing text and generating corresponding HTML views.

jsdifflib

Visual Center

This is a tool that will find the visual center of your images. It calculates a visual weight value for every pixel on the image: the square root of the difference between that pixel and the background color. And then the algorithm tries to balance that weight in all directions.

Visual Center

Jest

Jest matcher that performs image comparisons using pixelmatch and behaves just like Jest snapshots do! Very useful for visual regression testing.

Jest

Review

Visual regression testing tool for responsive websites. Get screenshots of all your running sites in different resolutions!

review

Wraith

It uses a headless browser to create screenshots of webpages on different environments (or at different moments in time) and then creates a diff of the two images; the affected areas are highlighted in blue.

Wraith

Spectre

A simple UI for browsing and inspecting diffs, and an API for runner scripts to submit screenshots to and receive a pass or fail in real time.

Spectre

CSS Critic

A lightweight tool for regression testing of Cascading Style Sheets.

CSS Critic

Gemini

Gemini is a utility for regression testing the visual appearance of web pages.

Gemini

Reg-cli

Visual regression test tool with html reporter.

reg-cli

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.

Differencify

Kobold

Visual regression testing framework, comparing screenshots from multiple builds.

Kobold

Happo

Happo is a command-line tool to visually diff user interfaces.

Happo

Navalia

It is an easy-to-use browser automation framework that can also scale with just about any project. It has two primary objects: simplicity and performance. Browser automation should be an enjoyable experience and not a painful one.

Navalia


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked