Implementation:Microsoft Playwright Pixelmatch

Overview

Pixelmatch is a third-party pixel-level image comparison library (from Mapbox) used by Playwright for visual regression testing, comparing two images pixel by pixel with anti-aliasing detection.

Description

The pixelmatch function compares two RGBA image buffers and returns the number of differing pixels. It supports configurable options:

• threshold -- color difference sensitivity (0 to 1, default 0.1)
• includeAA -- whether to count anti-aliased pixels as differences
• alpha -- opacity of original image in diff output
• aaColor -- color for anti-aliased pixels in diff output
• diffColor -- color for different pixels in diff output
• diffMask -- draw diff over transparent background

The algorithm uses a fast path for identical images (Uint32Array comparison), then falls back to per-pixel comparison using YIQ color space for perceptual similarity detection and anti-aliasing heuristics.

Usage

Used by the visual comparators module as one of the image comparison strategies (the "pixelmatch" comparator).

Code Reference

Source Location

packages/playwright-core/src/third_party/pixelmatch.js (255 lines)

Function Signature

function pixelmatch(img1, img2, output, width, height, options)
// Returns: number (count of differing pixels)

Import

import pixelmatch from '../../third_party/pixelmatch';

I/O Contract

Inputs

• img1, img2 -- Uint8Array/Buffer of RGBA pixel data
• output -- optional Uint8Array/Buffer for diff image output
• width, height -- image dimensions
• options -- comparison options (threshold, includeAA, etc.)

Outputs

• Returns the number of pixels that differ between the two images
• Optionally fills the output buffer with a visual diff image

Related Pages

• Microsoft_Playwright_Comparators -- Visual comparators using pixelmatch
• Microsoft_Playwright_ImageCompare -- SSIM-based alternative comparison
• Microsoft_Playwright_ImageUtils -- Image manipulation utilities