# storybook-addon-vis and vitest-plugin-vis > storybook-addon-vis: Storybook Vitest visual testing addon. vitest-plugin-vis: Vitest visual testing plugin. 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/guides/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/guides/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. - [vitest-plugin-vis](https://www.npmjs.com/package/vitest-plugin-vis): Vitest visual testing plugin. Peer dependencies: @vitest/browser ^4, @vitest/browser-playwright ^4 (optional), @vitest/browser-webdriverio ^4 (optional), vitest ^4. ## Documentation - [storybook-addon-vis: Automatic snapshots](https://repobuddy.github.io/visual-testing/addon/automatic-snapshots/): Take an image snapshot of every story without writing test code. - [storybook-addon-vis: Install](https://repobuddy.github.io/visual-testing/addon/install/): Install storybook-addon-vis and its peer dependencies. - [storybook-addon-vis: Manual snapshots](https://repobuddy.github.io/visual-testing/addon/manual-snapshots/): Take snapshots in a play function, check that one exists, and use the Chrome DevTools Protocol. - [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: Setup](https://repobuddy.github.io/visual-testing/addon/setup/): Configure Storybook, Vitest, TypeScript and .gitignore for storybook-addon-vis. Documents: cdp, defineAutoSnapshotParam, hasImageSnapshot, page, visAnnotations, storybookVis, vis. - [storybook-addon-vis: Troubleshooting](https://repobuddy.github.io/visual-testing/addon/troubleshooting/): Fix common installation and runtime problems. - [storybook-addon-vis: node](https://repobuddy.github.io/visual-testing/reference/addon/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/reference/addon/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/reference/addon/define-storybook-vis-options/): A helper function to configure options for Storybook Visual Testing addon. Documents: defineStorybookVisOptions. - [vitest-plugin-vis: Configuration](https://repobuddy.github.io/visual-testing/plugin/configuration/): Configure Vitest, .gitignore and TypeScript for vitest-plugin-vis. - [vitest-plugin-vis: Install](https://repobuddy.github.io/visual-testing/plugin/install/): Install vitest-plugin-vis and its peer dependencies. - [vitest-plugin-vis: auto snapshots/setAutoSnapshotOptions](https://repobuddy.github.io/visual-testing/reference/plugin/set-auto-snapshot-options/): A function to configure visual snapshot testing options for the current test or test suite. Documents: setAutoSnapshotOptions. - [vitest-plugin-vis: config](https://repobuddy.github.io/visual-testing/reference/plugin/config/overview/): Configuration refers to configuring the plugin in your `vitest.config.ts` file. - [vitest-plugin-vis: config/trimCommonFolder](https://repobuddy.github.io/visual-testing/reference/plugin/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. - [vitest-plugin-vis: config/vis](https://repobuddy.github.io/visual-testing/reference/plugin/config/vis/): `vis` from `vitest-plugin-vis/config` is the Vitest plugin of `vitest-plugin-vis`. Documents: vis. - [vitest-plugin-vis: expect/toMatchImageSnapshot](https://repobuddy.github.io/visual-testing/reference/plugin/matchers/expect-to-match-image-snapshot/): `expect().toMatchImageSnapshot()` is a custom matcher that compares the current DOM to a snapshot image. - [vitest-plugin-vis: page/hasImageSnapshot](https://repobuddy.github.io/visual-testing/reference/plugin/matchers/has-image-snapshot/): `page.hasImageSnapshot()` is a utility method that checks if an image snapshot exists for the current test. - [vitest-plugin-vis: page/toMatchImageSnapshot](https://repobuddy.github.io/visual-testing/reference/plugin/matchers/page-to-match-image-snapshot/): `page.toMatchImageSnapshot()` is a method that captures and compares full page or viewport screenshots against baseline images. - [vitest-plugin-vis: setup](https://repobuddy.github.io/visual-testing/reference/plugin/setup/overview/): `vitest-plugin-vis/setup` provides the API to setup the plugin on the client side. - [vitest-plugin-vis: setup/createVis](https://repobuddy.github.io/visual-testing/reference/plugin/setup/create-vis/): Import `createVis` from `vitest-plugin-vis/setup-api` (not from `vitest-plugin-vis/setup`). Documents: createVis. - [vitest-plugin-vis: setup/vis](https://repobuddy.github.io/visual-testing/reference/plugin/setup/vis/): `vis` object from `vitest-plugin-vis/setup` provides the API to setup the plugin on the client side. Documents: vis. ## 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: Awaitable, ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotComparisonInfo, ImageSnapshotKeyOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, MatchImageSnapshotOptions, MetaTask, PageImageSnapshotOptions, PixelComparisonOptions, PixelDiffOptions, ReviewImageOptions, SetupVisOptions, SnapshotTestMeta, SsimComparisonOptions, SsimDiffOptions, ToMatchImageSnapshotOptions, ToMatchPageImageSnapshotOptions; values: cdp, page, visAnnotations (28 exports, 6 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, 0 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). - [`vitest-plugin-vis`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/index.ts): function: setAutoSnapshotOptions; types: Awaitable, ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotComparisonInfo, ImageSnapshotKeyOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, MatchImageSnapshotOptions, MetaTask, PageImageSnapshotOptions, PixelComparisonOptions, PixelDiffOptions, ReviewImageOptions, SetupVisOptions, SnapshotTestMeta, SsimComparisonOptions, SsimDiffOptions, ToMatchImageSnapshotOptions, ToMatchPageImageSnapshotOptions (21 exports, 1 with a documentation page). - [`vitest-plugin-vis/client-api`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/client-api.ts): functions: autoSnapshotMatcher, hasImageSnapshotAction, loadImageSnapshotResultsAction, matchImageSnapshotAction, matchPageImageSnapshotAction, setAutoSnapshotOptions, toTaskId; types: Awaitable, ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotComparisonInfo, ImageSnapshotKeyOptions, ImageSnapshotMatcher, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, MatchImageSnapshotOptions, MetaTask, PageImageSnapshotOptions, PixelComparisonOptions, PixelDiffOptions, ReviewImageOptions, SetupVisOptions, SnapshotTestMeta, SsimComparisonOptions, SsimDiffOptions, ToMatchImageSnapshotOptions, ToMatchPageImageSnapshotOptions; values: BASELINE_DIR, CHANGED_REGIONS_SUFFIX, DIFF_DIR, NAME, RESULT_DIR, REVIEW_IMAGE_SUFFIX, SNAPSHOT_ROOT_DIR, success (36 exports, 1 with a documentation page). - [`vitest-plugin-vis/config`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/config.ts): functions: trimCommonFolder, vis; types: ComparisonMethod, PixelComparisonOptions, PixelDiffOptions, SsimComparisonOptions, SsimDiffOptions, VisOptions (8 exports, 2 with a documentation page). - [`vitest-plugin-vis/presets/auto`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/presets/auto.ts): no named exports; it is imported for its side effects. - [`vitest-plugin-vis/presets/manual`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/presets/manual.ts): no named exports; it is imported for its side effects. - [`vitest-plugin-vis/server-utils`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/server-utils.ts): functions: getSnapshotRootDir, resolveLegacySnapshotFileRelativePath, resolveSnapshotSubpathWithinLimits, trimCommonFolder; values: BASELINE_DIR, CHANGED_REGIONS_SUFFIX, DIFF_DIR, REVIEW_IMAGE_SUFFIX, SNAPSHOT_ROOT_DIR (9 exports, 1 with a documentation page). - [`vitest-plugin-vis/setup`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/setup.ts): value: vis (1 export, 1 with a documentation page). - [`vitest-plugin-vis/setup-api`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/setup-api.ts): function: createVis; type: VisClientConfigurator (2 exports, 1 with a documentation page). - [`vitest-plugin-vis/testing`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/testing.ts): values: UNI_IMAGE_DATA, UNI_PNG_BASE64, UNI_PNG_URL (3 exports, 0 with a documentation page). - [`vitest-plugin-vis/testing/node`](https://github.com/repobuddy/visual-testing/blob/main/packages/vitest-plugin-vis/src/exports/testing/node.ts): functions: getVisOption, stubSuite; values: UNI_IMAGE_DATA, UNI_PNG_BASE64, UNI_PNG_URL (5 exports, 0 with a documentation page). ## Optional - [storybook-addon-vis: Changelog](https://repobuddy.github.io/visual-testing/releases/changelog-addon/): Release history of storybook-addon-vis. - [vitest-plugin-vis: Changelog](https://repobuddy.github.io/visual-testing/releases/changelog-plugin/): Release history of vitest-plugin-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: 14 of 62 distinct exported declarations are named on a documentation page; 12 carry a doc comment.