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.
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.
jsdifflib
A javascript library for diffing text and generating corresponding HTML views.
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.
Jest
Jest matcher that performs image comparisons using pixelmatch and behaves just like Jest snapshots do! Very useful for visual regression testing.
Review
Visual regression testing tool for responsive websites. Get screenshots of all your running sites in different resolutions!
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.
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.
CSS Critic
A lightweight tool for regression testing of Cascading Style Sheets.
Gemini
Gemini is a utility for regression testing the visual appearance of web pages.
Reg-cli
Visual regression test tool with html reporter.
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.
Kobold
Visual regression testing framework, comparing screenshots from multiple builds.
Happo
Happo is a command-line tool to visually diff user interfaces.
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.
I have been using css critic, thanks for adding it.
https://eye.qaprovider.com one more tool for css regression testing.
As we use this tools to test some web sites every day we did a lot of improvements in the whole regression test process. We add functionality to do a little bit different diff from other tools. It is not just a pixel by pixel diff, it is more smart diff.
We do comparison from the top first until we get first changes, than we do comparison from the bottom until we get first changes. Than we do comparison on the rest part.Common libraries are not doing this, we developed it with C++.
It is a better approach because when you have font size changes you will see the changes in the bottom as well. Usually bottom is the same and it is better to skip it from diff results.
Better to check the diff for this case here: https://eye.qaprovider.com/diff/smart-example