Compare Screenshots (Pixel Diff)
visual-diffCompare two PNG screenshots pixel-by-pixel to detect visual regressions. Generates a highlighted diff image and a JSON report, and passes or fails based on a configurable threshold.
Instructions
visual-diff
Compare two PNG screenshots pixel-by-pixel using pixelmatch to detect visual regressions. Writes a highlighted diff image and a JSON report to the output directory.
What it does
Reads two PNG files, compares them pixel-by-pixel, and:
Reports the number and percentage of differing pixels
Determines pass/fail against a configurable threshold
Writes
diff.pngwith highlighted differences (red pixels where images differ)Writes
diff-report.jsonwith full metrics
Parameters
baselinePath (string, required): Path to the baseline (reference) PNG
currentPath (string, required): Path to the current (test) PNG
outputDir (string, optional): Directory for diff.png and diff-report.json. Defaults to the directory containing currentPath
threshold (number, optional): Maximum acceptable ratio of different pixels (0.01 = 1%). Default: 0.01
Returns
Text summary and structuredContent:
differentPixels: Count of pixels that differdifferencePercentage: Ratio of different pixels to total pixels (0–1)passed: true if differencePercentage <= threshold
Artifacts Written
diff.png: Diff image highlighting changed pixels (pixelmatch output)diff-report.json: JSON with baseline, current, dimensions, totalPixels, differentPixels, differencePercentage, thresholdPercentage, passed
Errors
Throws McpError(InvalidRequest) for:
Missing baseline or current file
Dimension mismatch between images
PNG read failures
Examples
Basic diff
await visualDiffTool({
baselinePath: '/tmp/before.png',
currentPath: '/tmp/after.png'
})Custom output directory and strict threshold
await visualDiffTool({
baselinePath: '/tmp/before.png',
currentPath: '/tmp/after.png',
outputDir: '/tmp/diffs',
threshold: 0.001
})Zero-tolerance regression check
await visualDiffTool({
baselinePath: '/snapshots/login-baseline.png',
currentPath: '/snapshots/login-current.png',
threshold: 0
})Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| outputDir | No | ||
| threshold | No | ||
| currentPath | Yes | ||
| baselinePath | Yes |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| passed | Yes | ||
| differentPixels | Yes | ||
| differencePercentage | Yes |