Skip to content
Visual-diff manual

Visual-diff report

A report is the record of one comparison run: every variant judged against its counterpart, sorted into buckets, with the screenshots behind each verdict. It opens on a summary — a count for every bucket, and both capture sets named above the results.

Most of a report is the review loop. Variants are marked reviewed one at a time, and the page tracks the progress, jumps to the next unreviewed card, hides what is done and filters down to a story by title. The loop is walkable by keyboard, which is a requirement rather than a nicety.

When a difference needs a closer look, the comparison modal opens over it: before, after and the generated diff, a slider to move the boundary between the two, and a blink mode that alternates them. The modal state travels in the URL, so a link carries what you were looking at.

A finished comparison report: both capture sets identified with their commits, the pinned container and browser versions, a row of count chips reading changed 6, added 0, removed 0, errored 0, a11y 0, unchanged 100, and the review controls with progress at 0 of 6.A finished comparison report: both capture sets identified with their commits, the pinned container and browser versions, a row of count chips reading changed 6, added 0, removed 0, errored 0, a11y 0, unchanged 100, and the review controls with progress at 0 of 6.
A report opens on its counts. The chips are the buckets, and the row under them is the review loop the scenarios walk through.
Before each task
  • a finished comparison report exists

The report summarizes the comparison by bucket

  1. When I open the report
  2. Then I see a count chip for every bucket
  3. And both capture sets are identified above the results

The unstable-story warning is visible

  1. When I open the report
  2. Then the corpus warning names the unstable stories

The skipped-story warning names what was never captured

  1. When I open the report
  2. Then the corpus warning names the skipped stories

Marking a variant reviewed advances the progress

  1. When I open the report
  2. And I mark the first changed story as reviewed
  3. Then the review progress increases by one

Jumping to the next unreviewed variant

  1. When I open the report
  2. And I jump to the next unreviewed variant
  3. Then an unreviewed story card is scrolled into view

Hiding reviewed variants collapses them

  1. When I open the report
  2. And I mark the first changed story as reviewed
  3. And I hide the reviewed variants
  4. Then no reviewed story card remains visible

Filtering narrows the report to matching stories

  1. When I open the report
  2. And I filter by a story's title
  3. Then only story cards matching the filter remain visible

A removed variant shows its missing side

  1. When I open the report
  2. Then the removed story shows a placeholder for the side it never had

The review loop is keyboard-walkable

  1. When I open the report
  2. And I walk the review loop with the keyboard
  3. Then the walked variant is marked reviewed without a pointer

The comparison modal opens from the compare tools

  1. When I open the report
  2. And I open the slider overlay on the first changed story
  3. Then the comparison modal is open with slider mode active

The modal switches between baseline, candidate and diff

  1. Given the comparison modal is open
  2. When I switch the modal to candidate
  3. Then the modal shows only the candidate shot

Blink mode alternates the two shots

  1. Given the comparison modal is open
  2. When I switch the modal to blink
  3. Then the shot alternates between baseline and candidate

Moving the scrubber moves the divider

  1. Given the comparison modal is open
  2. When I move the slider position
  3. Then the divider follows the scrubber

Escape closes the modal

  1. Given the comparison modal is open
  2. When I press escape
  3. Then the comparison modal is closed

A shared link restores the modal state

  1. When I open a report link carrying a story and slider mode
  2. Then the comparison modal is open with slider mode active