Skip to content
visual-testingvisual-testingvisual-testing

Chrome DevTools Protocol

Goal: use the Chrome DevTools Protocol (CDP) in a story test, for example to read the accessible name Chromium exposes.

cdp is a proxy of cdp() from vitest/browser. Importing vitest/browser directly in a story breaks the story in a plain Storybook preview, where the module throws on import. The proxy loads it only during a Vitest browser run.

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


export const AccessibleName = {
  async play() {
    const session = cdp()
    await session.send('Accessibility.enable')
    const { nodes } = await session.send('Accessibility.getFullAXTree')
    // assert on nodes
  },
}

Limits

Section titled “Limits”
  • CDP is available only with the Playwright provider on Chromium.
  • cdp() throws outside a Vitest browser run, so keep such tests in Vitest.

This is not about snapshots, but it shares the proxy with page.