compare_screenshots
Capture side-by-side screenshots of two URLs and generate a pixel-level diff image highlighting every changed pixel. Ideal for verifying UI changes or comparing staging vs production.
Instructions
Before/after visual comparison with pixel-level diffing. Captures screenshots of two URLs at the same viewport size, computes an accurate pixel-level difference using pixelmatch, and returns BOTH images plus a red-highlighted diff image showing exactly which pixels changed. Use this to verify UI changes, compare staging vs production, or check before/after states of a redesign.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| urlA | Yes | First URL — the 'before' state (e.g., http://localhost:3000) | |
| urlB | Yes | Second URL — the 'after' state (e.g., http://localhost:3001) | |
| width | No | Viewport width in pixels | |
| height | No | Viewport height in pixels |