# storybook-addon-vis > storybook-addon-vis: Storybook Vitest visual testing addon. Image snapshot testing for Vitest browser mode, with a Storybook integration. Documentation: https://repobuddy.github.io/visual-testing/ This file is generated by `packages/storybook-addon-vis/scripts/generate-llms-txt.mjs` from the packages' `exports` maps, their source, and the documentation pages. Do not edit it by hand; run `pnpm docs:llms` instead. If an image snapshot test fails, read [Reviewing Failures with Agents](https://repobuddy.github.io/visual-testing/visual-testing/reviewing-failures-with-agents/) before opening any image. Without network access, read it from `node_modules/storybook-addon-vis/src/reviewing_failures_with_agents.mdx`. Image snapshots are stored in the repository under `__vis__/`. Within it, `__baselines__` holds the expected images, `__results__` holds the images from the latest run, and `__diffs__` holds the diff images of failed comparisons. Next to each diff image, `.review.png` is the review image of the changed regions and `.regions.json` lists those regions. Import from the entry points listed below, not from package internals. Documentation pages list the names they cover; names without a page have only their type declarations. ## Start here - [storybook-addon-vis: Reviewing Failures with Agents](https://repobuddy.github.io/visual-testing/visual-testing/reviewing-failures-with-agents/): When an image snapshot fails, a coding agent often opens the baseline and the result and compares them. ## Packages - [storybook-addon-vis](https://www.npmjs.com/package/storybook-addon-vis): Storybook Vitest visual testing addon. Peer dependencies: @storybook/addon-vitest ^10.1.10, @vitest/browser ^4, storybook ^10.1.10, vitest ^4. ## Documentation - [storybook-addon-vis: Automatic snapshots](https://repobuddy.github.io/visual-testing/addon/guides/automatic-snapshots/): Take an image snapshot of every story without writing test code. - [storybook-addon-vis: CI](https://repobuddy.github.io/visual-testing/addon/guides/ci/): Run story snapshots on CI with platform baselines. - [storybook-addon-vis: CSF Next and story.test()](https://repobuddy.github.io/visual-testing/addon/guides/csf-next/): Set up visual testing in the preview for CSF Next stories. - [storybook-addon-vis: Chrome DevTools Protocol](https://repobuddy.github.io/visual-testing/addon/guides/chrome-devtools-protocol/): Use cdp() inside a story under Playwright and Chromium. - [storybook-addon-vis: Features](https://repobuddy.github.io/visual-testing/addon/features/): Every capability of the addon, each linked to its guide. - [storybook-addon-vis: Install](https://repobuddy.github.io/visual-testing/addon/get-started/): Install storybook-addon-vis and its peer dependencies. - [storybook-addon-vis: Manual snapshots](https://repobuddy.github.io/visual-testing/addon/guides/manual-snapshots/): Take snapshots in a play function, check that one exists, and use the Chrome DevTools Protocol. - [storybook-addon-vis: Monorepos and custom snapshot paths](https://repobuddy.github.io/visual-testing/addon/guides/monorepo-and-paths/): Tell the Vis panel where the snapshots are. - [storybook-addon-vis: Releases/Migrating to 1.0](https://repobuddy.github.io/visual-testing/releases/migrate-to-1/): storybook-addon-vis 1.0 has made some major improvements over the previous version. - [storybook-addon-vis: Releases/Migrating to 3.0](https://repobuddy.github.io/visual-testing/releases/migrate-to-3/): storybook-addon-vis 3.0.0 supports Storybook 10. - [storybook-addon-vis: Reviewing failures (addon view)](https://repobuddy.github.io/visual-testing/addon/guides/reviewing-failures/): Find what changed when a story snapshot fails. - [storybook-addon-vis: Setup](https://repobuddy.github.io/visual-testing/addon/configuration/): Configure Storybook, Vitest, TypeScript and .gitignore for storybook-addon-vis. Documents: cdp, default, defineAutoSnapshotParam, hasImageSnapshot, isSnapshotEnabled, page, visAnnotations, experimental_serverChannel, storybookVis, vis. - [storybook-addon-vis: The Vis panel](https://repobuddy.github.io/visual-testing/addon/guides/the-vis-panel/): Review baseline, result and diff of a story inside Storybook. - [storybook-addon-vis: Themes](https://repobuddy.github.io/visual-testing/addon/guides/themes/): Take every snapshot once per theme, such as light and dark. - [storybook-addon-vis: Thresholds and comparison for stories](https://repobuddy.github.io/visual-testing/addon/guides/thresholds-and-comparison/): Tolerate small differences and pick pixel or SSIM comparison for stories. - [storybook-addon-vis: Troubleshooting](https://repobuddy.github.io/visual-testing/addon/troubleshooting/): Fix common installation and runtime problems. - [storybook-addon-vis: Viewports and multiple instances](https://repobuddy.github.io/visual-testing/addon/guides/viewports-and-multiple-instances/): Snapshot the same stories at several browser sizes. - [storybook-addon-vis: node](https://repobuddy.github.io/visual-testing/addon/reference/node/): `storybook-addon-vis/node` provides functionality to configure the Storybook Visual Testing addon in the `.storybook/main.ts` file. - [storybook-addon-vis: node/defineStorybookVis](https://repobuddy.github.io/visual-testing/addon/reference/define-storybook-vis/): A helper function to configure the Storybook Visual Testing addon in `.storybook/main.ts`. Documents: defineStorybookVis. - [storybook-addon-vis: node/defineStorybookVisOptions](https://repobuddy.github.io/visual-testing/addon/reference/define-storybook-vis-options/): A helper function to configure options for Storybook Visual Testing addon. Documents: defineStorybookVisOptions. - [vitest-plugin-vis: auto snapshots/setAutoSnapshotOptions](https://repobuddy.github.io/visual-testing/plugin/reference/set-auto-snapshot-options/): A function to configure visual snapshot testing options for the current test or test suite. Documents: setAutoSnapshotOptions. - [vitest-plugin-vis: client-api](https://repobuddy.github.io/visual-testing/plugin/reference/client-api/): The browser-side building blocks of vitest-plugin-vis, for tools that build on the plugin. Documents: AnimationsOptions, Awaitable, ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotComparisonInfo, ImageSnapshotKeyOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, MaskLocator, MaskOptions, MatchImageSnapshotOptions, MetaTask, PageImageSnapshotOptions, PixelComparisonOptions, PixelDiffOptions, ReviewImageOptions, SetupVisOptions, SnapshotTestMeta, SsimComparisonOptions, SsimDiffOptions, ToMatchImageSnapshotOptions, ToMatchPageImageSnapshotOptions. - [vitest-plugin-vis: config/trimCommonFolder](https://repobuddy.github.io/visual-testing/plugin/reference/config/trim-common-folder/): The `trimCommonFolder` function is a utility that removes common folder prefixes from file paths to generate cleaner snapshot sub-paths. Documents: trimCommonFolder. ## Visual testing concepts - [What is visual testing](https://repobuddy.github.io/visual-testing/visual-testing/what-is-visual-testing/): What visual testing catches and misses, and the loop of writing, snapshotting, comparing, reviewing and updating. - [How snapshots work](https://repobuddy.github.io/visual-testing/visual-testing/how-snapshots-work/): Baseline, result and diff images, the __vis__ folder layout, and what to commit and what to ignore. - [Comparison and thresholds](https://repobuddy.github.io/visual-testing/visual-testing/comparison-and-thresholds/): How a result is compared with its baseline: pixel and SSIM methods, failure thresholds in pixels or percent, and how to choose. - [Platforms and CI](https://repobuddy.github.io/visual-testing/visual-testing/platforms-and-ci/): Why baselines are kept per platform, how local runs differ from CI, and how to keep baselines current in CI. - [Updating baselines](https://repobuddy.github.io/visual-testing/visual-testing/updating-baselines/): Create the first baselines and update them after an intended change, with createMissingBaseline, updateSnapshot and vitest -u. - [Reviewing failures](https://repobuddy.github.io/visual-testing/visual-testing/reviewing-failures/): Read a failed image snapshot: the error message, the diff, the review image, the regions file, the Vis panel and git diff. - [Variations](https://repobuddy.github.io/visual-testing/visual-testing/variations/): Take the same test in several themes, viewports and browsers, and when each one pays off. - [Choosing a package](https://repobuddy.github.io/visual-testing/visual-testing/choosing-a-package/): Pick storybook-addon-vis for Storybook stories or vitest-plugin-vis for Vitest Browser Mode tests, and see how they relate. ## Entry points - [`storybook-addon-vis`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/index.ts): default export; functions: defineAutoSnapshotParam, hasImageSnapshot, isSnapshotEnabled, setAutoSnapshotOptions; types: AnimationsOptions, Awaitable, ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotComparisonInfo, ImageSnapshotKeyOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, MaskLocator, MaskOptions, MatchImageSnapshotOptions, MetaTask, PageImageSnapshotOptions, PixelComparisonOptions, PixelDiffOptions, ReviewImageOptions, SetupVisOptions, SnapshotTestMeta, SsimComparisonOptions, SsimDiffOptions, ToMatchImageSnapshotOptions, ToMatchPageImageSnapshotOptions; values: cdp, page, visAnnotations (31 exports, 31 with a documentation page). - [`storybook-addon-vis/manager`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/exports/manager.tsx): no named exports; it is imported for its side effects. - [`storybook-addon-vis/matcher`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/exports/matcher.ts): no named exports; it is imported for its side effects. - [`storybook-addon-vis/node`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/exports/node.ts): functions: defineStorybookVis, defineStorybookVisOptions (2 exports, 2 with a documentation page). - [`storybook-addon-vis/preset`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/exports/preset.ts): value: experimental_serverChannel (1 export, 1 with a documentation page). - [`storybook-addon-vis/vitest-plugin`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/exports/vitest-plugin.ts): functions: storybookVis, trimCommonFolder (2 exports, 2 with a documentation page). - [`storybook-addon-vis/vitest-setup`](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/src/exports/vitest-setup.ts): function: setAutoSnapshotOptions; values: vis, visAnnotations (3 exports, 3 with a documentation page). ## Optional - [storybook-addon-vis: Changelog](https://repobuddy.github.io/visual-testing/releases/changelog-addon/): Release history of storybook-addon-vis. - [Generator](https://github.com/repobuddy/visual-testing/blob/main/packages/storybook-addon-vis/scripts/generate-llms-txt.mjs): Source of this file. Run it with `--gaps` to list the undocumented exports. Documentation coverage: 37 of 37 distinct exported declarations are named on a documentation page; 7 carry a doc comment.