Screenshot Validation Tool

Build a simple screenshot validation tool that compares two PNG screenshots and reports whether they differ.

Requirements

You need to implement a function that:

1. Accepts two image buffers (RGBA format) along with their dimensions
2. Compares the images pixel-by-pixel to detect differences
3. Returns the count of pixels that differ between the two images
4. Optionally generates a visual diff image highlighting the differences

The comparison should be sensitive enough to detect meaningful visual differences while being practical for screenshot testing scenarios.

Implementation

@generates

API

/**
 * Compares two image buffers and returns the count of differing pixels.
 *
 * @param {Uint8Array|Uint8ClampedArray|Buffer} img1 - First image buffer (RGBA format)
 * @param {Uint8Array|Uint8ClampedArray|Buffer} img2 - Second image buffer (RGBA format)
 * @param {number} width - Width of both images in pixels
 * @param {number} height - Height of both images in pixels
 * @param {Object} options - Comparison options
 * @param {Uint8Array|Uint8ClampedArray|Buffer|null} options.output - Optional output buffer for diff image
 * @param {number} options.threshold - Sensitivity threshold (0-1), default 0.1
 * @returns {number} Count of pixels that differ between the two images
 */
function compareImages(img1, img2, width, height, options = {}) {
  // Implementation here
}

module.exports = { compareImages };

Test Cases

Identical Images

• Given two identical 10x10 RGBA image buffers, the function returns 0 @test

Different Images

• Given two completely different 10x10 RGBA image buffers (all pixels different), the function returns 100 @test

Partial Differences

• Given two 20x20 RGBA image buffers where exactly 50 pixels differ, the function returns 50 @test

Threshold Sensitivity

• Given two similar images with minor color variations and a threshold of 0.0, the function detects differences @test
• Given two similar images with minor color variations and a threshold of 0.3, the function reports fewer differences @test

Diff Output Generation

• Given two different images and an output buffer, the function populates the output buffer with visual diff data @test

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides pixel-level image comparison functionality.

@satisfied-by