playwright-component-testing

Create a story gallery page served by your dev server that exposes window.mount and window.unmount, then write plain Playwright tests using the built-in mount fixture. Each component scenario becomes a named export in a .story.tsx file next to the component.

Convert each mount(<Component/>) JSX call into a story export, keep plain data props as mount's second argument, and move beforeMount hooks into the gallery's window.mount. Spy assertions become toHaveValue() checks on state the story records into hidden form inputs.

Yes, Vue 3 is supported through .story.ts render-function stories or .story.vue single-file-component stories. The gallery mounts a reactive host once with createApp and updates refs so prop changes re-render in place and preserve state.

The story owns the state and provides the callbacks, recording observed values into hidden form inputs with data-testid attributes. Tests perform actions and assert with toHaveValue(), which retries until the recorded state lands.

State resets when the gallery recreates its root on each window.mount call instead of reusing it. Create the root once and render into it on every call so the framework reconciles and preserves component-internal state across update().

Per-test JSX trees cannot cross into the browser, so each composition needs its own story export, and story ids are strings resolved at runtime, so renames break specs without compile-time errors. Props passed to mount must be plain serializable data.