Screenshot Comparison Utility

Build a screenshot comparison utility that efficiently validates image matches and conditionally generates visual diff outputs based on comparison results.

Requirements

Your utility should support two distinct comparison modes:

1. Fast validation mode: Quickly check if two screenshots match without generating visual output
2. Detailed analysis mode: Perform comparison and generate a visual diff when differences are detected

The utility should implement a function compareScreenshots(img1, img2, width, height, options) that:

• Accepts two image buffers in RGBA format
• Takes image dimensions (width and height)
• Accepts an options object with a generateDiff boolean flag
• Returns an object containing:
  • mismatchCount: number of mismatched pixels
  • diffBuffer: visual diff buffer (only if generateDiff is true, otherwise null)

The function should optimize performance by avoiding diff generation when not needed.

Test Cases

• When comparing two identical images with generateDiff: false, it returns mismatchCount: 0 and diffBuffer: null @test
• When comparing two different images with generateDiff: false, it returns a positive mismatchCount and diffBuffer: null @test
• When comparing two identical images with generateDiff: true, it returns mismatchCount: 0 and a valid diffBuffer with grayscale output @test
• When comparing two different images with generateDiff: true, it returns a positive mismatchCount and a diffBuffer highlighting differences @test

Implementation

@generates

API

/**
 * Compare two screenshot images with optional diff generation
 *
 * @param {Buffer|Uint8Array} img1 - First image buffer (RGBA format)
 * @param {Buffer|Uint8Array} img2 - Second image buffer (RGBA format)
 * @param {number} width - Image width in pixels
 * @param {number} height - Image height in pixels
 * @param {Object} options - Comparison options
 * @param {boolean} options.generateDiff - Whether to generate visual diff output
 * @returns {Object} Result object with mismatchCount and diffBuffer
 */
function compareScreenshots(img1, img2, width, height, options) {
  // IMPLEMENTATION HERE
}

module.exports = { compareScreenshots };

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides pixel-level image comparison functionality.