Skip to content

Visual testing

Use snapshot where the current viewport is a visual contract:

snapshot checkout
snapshot cart-empty threshold="2%"

The checkpoint name is a bare identifier. threshold is a percentage of pixels; it defaults to 1%.

The first green run with a new checkpoint reports new and establishes the approved baseline. Later runs compare the current capture with that baseline:

  • new — no approved baseline existed for this checkpoint.
  • pass — the difference stayed within the threshold.
  • fail — the difference exceeded the threshold and failed the step.

Comparison results include diff_fraction. A failed checkpoint stores the current capture and a diff image. Visual mismatches are never autohealed.

Baselines are separate for each checkpoint name and browser engine, so Chromium, Firefox, and WebKit do not share one visual truth.

The dashboard viewer provides slider, side-by-side, onion-skin, and diff heatmap modes. After reviewing a failed capture, approve it to make that image the active baseline for the checkpoint and browser. The superseded baseline is kept in the visual_baselines approval history.

Every normal flow step already stores a screenshot at steps/<idx>.png as run evidence. snapshot adds an explicit, contractual comparison at the moments you choose.