Add visual regression tests to a web app that fail automatically when a UI component changes unexpectedly between releases
Generate a diff image highlighting exactly which pixels changed between two screenshots of the same page
Compare before-and-after screenshots from the command line to check if a CSS change broke any page layouts
| mapbox/pixelmatch | covid19india/covid19india.github.io | apollographql/react-apollo | |
|---|---|---|---|
| Stars | 6,810 | 6,809 | 6,801 |
| Language | JavaScript | JavaScript | JavaScript |
| Setup difficulty | easy | easy | easy |
| Complexity | 2/5 | 2/5 | 2/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Pixelmatch is a small JavaScript library that compares two images pixel by pixel and tells you how many pixels differ between them. Its main use is in automated testing, where you want to catch visual changes in screenshots between software versions. When the comparison runs, it can produce a third image showing exactly which pixels changed, with the differences highlighted in a color you configure. The library takes raw image data as input rather than file paths, which keeps it free of dependencies and makes it fast. You pass in the pixel arrays from both images plus a target array for the diff output, along with the width and height. It returns the count of mismatched pixels. The comparison uses a perceptual color difference formula, which means it accounts for how human eyes perceive color rather than comparing raw numbers, reducing false positives on subtle differences. It also detects anti-aliased pixels (the softened edge pixels that rendering engines add to smooth diagonal lines) and ignores them by default, since those often differ slightly without representing a meaningful visual change. You can tune sensitivity with a threshold option ranging from 0 to 1. Lower values catch smaller differences. Other options control the color used for highlighted pixels in the diff output, whether to treat anti-aliased pixels as errors, and how transparent unchanged pixels appear in the diff image. Pixelmatch works in both Node.js (the server-side JavaScript runtime) and directly in web browsers. It can be installed via npm or loaded from a CDN. A command-line tool is also included for comparing PNG files without writing any code, using a simple four-argument command. The library is around 150 lines of code and has no external dependencies.
A tiny JavaScript library that compares two images pixel by pixel to count visual differences, mainly used in automated tests to catch unintended UI changes between software versions.
Mainly JavaScript. The stack also includes JavaScript, Node.js.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.