Compare visual state
compare-visual-stateCaptures a page or element screenshot, compares it with a stored baseline, and reports changed pixels, affected regions, color shifts, and a red-highlighted diff image.
Instructions
Visual regression check: screenshot a live page (or element), compare it to a stored baseline, and report how many pixels changed, WHERE they changed (bounding regions), and the average color shift ("blue → red"). First call saves the baseline; later calls compare. Writes a red-highlighted diff image for review.
Tool call template
Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {
"url": "<url>",
"name": "<name>"
},
"name": "compare-visual-state"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| har | No | ||
| url | Yes | Full URL of the page (or element target) to capture | |
| mask | No | Hide dynamic parts (timestamps, ads, avatars) from both images: selectors or locators. Saved with the baseline and reused by later compares | |
| name | Yes | Baseline id, e.g. "checkout-page" or "submit-button" | |
| action | No | 'baseline' overwrites the stored baseline; 'compare' (default) compares against it | |
| device | No | Playwright device preset, e.g. 'iPhone 15', 'Pixel 7', 'iPad Pro 11' (viewport, user agent, touch) | |
| routes | No | Network mocks, first match wins: json/body/status fulfil, abort fails, delayMs alone slows the real request | |
| actions | No | Steps run in order after load to reach a state (modal, step 3). One call = one fresh browser, so include the login steps; end with a 'wait' on what the state shows | |
| browser | No | Engine (default chromium) | |
| channel | No | Branded Chromium to launch instead of the bundled one (must be installed) | |
| connect | No | Remote browser: Playwright ws(s):// endpoint or 'cdp:<url>'; keys as {{env:E2E_…}} | |
| headers | No | Extra HTTP headers, e.g. Authorization | |
| offline | No | Go offline once the page has loaded, before steps run, to check offline and retry states | |
| waitFor | No | Wait for this selector before capturing | |
| fullPage | No | Capture the full scrollable page (default false) | |
| selector | No | Capture only this element (selector or locator) | |
| viewport | No | ||
| timeoutMs | No | ||
| tolerance | No | Percent of pixels that may differ before reporting a change (default 0.1) | |
| waitUntil | No | ||
| blockWrites | No | Abort POST/PUT/PATCH/DELETE requests no mock answers, so steps cannot change real data (default: PW_MCP_BLOCK_WRITES) | |
| projectRoot | No | Project directory; defaults to the server working directory | |
| storageState | No | Logged-in session: storageState JSON inside the project, e.g. playwright/.auth/user.json | |
| blockResources | No | Skip these requests for speed and privacy: image, media, font, stylesheet, trackers (known analytics/ad hosts); default PW_MCP_BLOCK_RESOURCES | |
| pixelThreshold | No | Combined per-pixel channel delta considered different (default 60) | |
| actionTimeoutMs | No | How long each action waits for its element (default 10000); keep timeoutMs above the total |