Screenshot Comparison Tool

Overview

Build a screenshot comparison utility that can compare two images and generate visual difference reports. The tool should support comparing PNG images and producing visual outputs that highlight the differences between them.

Requirements

Core Functionality

1. Image Comparison: Compare two PNG images of equal dimensions and identify differences between them
2. Difference Output: Generate a visual diff image that highlights where the two images differ
3. Statistics Reporting: Return statistics about the comparison, including the number of differing pixels and percentage of difference

API Design

Create a function compareScreenshots that:

• Accepts paths to two PNG images as input
• Accepts an optional output path for the diff image
• Returns an object containing:
  • mismatchedPixels: number of pixels that differ
  • totalPixels: total number of pixels compared
  • percentDifference: percentage of pixels that differ

Visual Diff Requirements

The visual diff image should:

• Show matching pixels in a subdued grayscale representation
• Highlight differing pixels in a distinct color (red recommended)
• Be saved as a PNG file when an output path is provided

Test Cases { .test }

Create a test file compare.test.js with the following test cases:

Test 1: Identical Images @test

// Compare an image with itself
// Expected: 0 mismatched pixels, 0% difference

Test 2: Different Images @test

// Compare two different images of the same size
// Expected: mismatchedPixels > 0, percentDifference > 0
// A diff image should be generated

Test 3: Statistics Accuracy @test

// Verify that percentDifference = (mismatchedPixels / totalPixels) * 100
// Verify that totalPixels = width * height

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides pixel-level image comparison capabilities for visual regression testing.

pngjs { .dependency }

Provides PNG encoding and decoding functionality for reading and writing PNG images.

Constraints

• Images must be the same dimensions (width and height)
• Only PNG format is supported
• The solution should handle RGBA color space (4 bytes per pixel)