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.
It automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.
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.
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 matcher that performs image comparisons using pixelmatch and behaves just like Jest snapshots do! Very useful for visual regression testing.
Visual regression testing tool for responsive websites. Get screenshots of all your running sites in different resolutions!
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.
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.
A lightweight tool for regression testing of Cascading Style Sheets.
Gemini is a utility for regression testing the visual appearance of web pages.
Visual regression test tool with html reporter.
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.
Visual regression testing framework, comparing screenshots from multiple builds.
Happo is a command-line tool to visually diff user interfaces.
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.