png-visual-compare

Visual Regression Testing for PNGs in JavaScript/TypeScript

A Node.js utility to compare PNG images or their areas without binary and OS dependencies.

Description

This package exports single function comparePng which returns the number of mismatched pixels and optionally can create a diff PNG file.
Under the hood it uses pixelmatch lib for pixel-level image comparison.

Getting started

Installation:

npm install -D png-visual-compare

Note: This package requires Node.js version 20 or higher.

Example

test(`Compare PNG`, async () => {
  const compareResult: number =
    comparePng(
    img1, // First file path or Buffer to compare
    img2, // Second file path or Buffer to compare
    {
      excludedAreas, // Areas list to exclude from comparing, default value is [].
      diffFilePath, // File path where the differences file will be stored, default value is undefined.
      throwErrorOnInvalidInputData, // Compare with empty file if set to false, default value is undefined. Will throw an exception if both files are invalid.
      pixelmatchOptions, // Pass options to Pixelmatch, default value is undefined.
    });

  expect(compareResult).toBe(0); // Number of mismatched pixels should be 0.

   ...
});

Buy Me A Coffee

In case you want support my work