This page is an index.
Each row names a capability and links to the page that shows how to use it.
The concepts behind them are in Visual testing.
| Feature |
In one line |
Guide |
| Automatic snapshots |
Every story with the snapshot tag is captured at the end of its test. |
Automatic snapshots |
| Per-story opt out |
!snapshot turns a story off, like !test. |
Automatic snapshots |
| Manual snapshots |
expect(element).toMatchImageSnapshot() in a play function, on the page or on one element. |
Manual snapshots |
| Existence check |
hasImageSnapshot() tells a story whether its baseline exists. |
Manual snapshots |
| CSF Next |
Setup in the preview with addonVis(), and snapshots of stories with story.test(). |
CSF Next and story.test() |
| Chrome DevTools Protocol |
cdp() works inside stories under Playwright and Chromium. |
Chrome DevTools Protocol |
| Feature |
In one line |
Guide |
| Thresholds |
Tolerate a number or percentage of different pixels, globally, per story or per call. |
Thresholds and comparison |
| Pixel and SSIM comparison |
Pick the algorithm per project, story or call. |
Thresholds and comparison |
| Vis panel |
Baseline, result and diff of a story inside Storybook, with swipe and onion skin. |
The Vis panel |
| Review image |
A failure writes a side-by-side crop of each changed region and a regions file. |
Reviewing failures |
| Agent review |
A skill and an llms.txt help coding agents read failures cheaply. |
Reviewing failures with agents |
