Skip to main content
Glama

Compare visual state

compare-visual-state
DestructiveIdempotent

Capture a live page or element, compare it to a stored baseline, and report pixel changes, changed regions, and average color shift. Use the first run to save the baseline and output a 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.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlYesFull URL of the page (or element target) to capture
nameYesBaseline id, e.g. "checkout-page" or "submit-button"
actionNo'baseline' overwrites the stored baseline; 'compare' (default) compares against it
actionsNoSteps run after load to reach a state (modal, step 3)
headersNoExtra HTTP headers, e.g. Authorization
waitForNoWait for this selector before capturing
fullPageNoCapture the full scrollable page (default false)
selectorNoCapture only this element (selector or locator)
viewportNo
timeoutMsNo
toleranceNoPercent of pixels that may differ before reporting a change (default 0.1)
waitUntilNo
projectRootNoProject directory; defaults to the server working directory
storageStateNoLogged-in session: storageState JSON inside the project, e.g. playwright/.auth/user.json
pixelThresholdNoCombined per-pixel channel delta considered different (default 60)

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.3.2

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations declare destructiveHint=true and openWorldHint=true; the description supports this by disclosing the baseline-save behavior and that a red-highlighted diff image file is written as a side effect, which is real context beyond the flags. It does not warn that re-saving a baseline overwrites the prior one, nor mention auth/session needs (storageState), leaving one meaningful destructive consequence implicit.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the tool's identity, then the baseline/compare lifecycle, then the artifact written — three useful sentences with no filler. The long parentheticals ('WHERE they changed (bounding regions), and the average color shift ("blue → red")') are arguably denser than needed but still informative.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a 15-parameter tool with nested objects and no output schema, the description usefully summarizes the return content (change count, bounding regions, color shift), substituting for the missing output schema. It still omits where the diff image is written and whether results come back as structured data, so it is strong but not fully complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 80%, so the schema largely documents url, name, action, selector, tolerance, and pixelThreshold itself. The description only loosely maps to parameters ('page (or element)' for url/selector, baseline lifecycle for action) and adds no format, default, or unit detail beyond the schema, so the baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Opens with a specific verb+resource label ('Visual regression check') and then concretely describes the pipeline: screenshot a live page or element, compare to a stored baseline, report pixel deltas, bounding regions, and color shift. An agent can distinguish this from inspect-page, validate-selector, or run-test without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Clearly states the operating model: 'First call saves the baseline; later calls compare,' which tells the agent how to sequence calls. It does not name sibling alternatives or when NOT to use it (e.g., prefer inspect-page for DOM debugging), so it stops short of full routing guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.