Skip to content
visual-testingvisual-testingvisual-testing

page and cdp

storybook-addon-vis exports page and cdp. They are proxies of page and cdp() from vitest/browser. A story cannot import vitest/browser itself, because the module throws in a plain Storybook preview. The proxies load it only during a Vitest browser run.

import { cdp, page } from 'storybook-addon-vis'

page

Section titled “page”

Use it like the Vitest page, with page.toMatchImageSnapshot() and page.hasImageSnapshot() added. In a plain preview, page.toMatchImageSnapshot() does nothing. See page.toMatchImageSnapshot.

cdp

Section titled “cdp”

cdp() returns the Chrome DevTools Protocol session. It needs the Playwright provider on Chromium and throws outside a Vitest browser run. See Chrome DevTools Protocol.