Storybook–Playwright iframe synchronization across React, Vue, and Angular

Integration boundary

The Storybook test runner (@storybook/test-runner) executes stories inside a Playwright-controlled iframe, but each supported framework—React, Vue, and Angular—implements its own mount and unmount lifecycle. This divergence creates an unresolved interoperability question: whether a single, universal "story ready" signal can replace the current framework-specific heuristics.

Goal and constraints

The precise goal is to define a cross-framework contract that tells Playwright when a story's component tree is fully interactive, without relying on framework-specific polling or arbitrary timeouts. Constraints include the experimental status of the test-runner API, the need to preserve existing story semantics, and the requirement that any solution works in both Vite and Webpack builder configurations introduced in Storybook 8.

Open questions

1. What minimal set of lifecycle hooks must each framework expose so that Playwright can await a consistent "ready" state?
2. Can the contract be implemented without modifying framework adapters, or does it require upstream changes in React 18 concurrent mode, Vue 3 suspense, and Angular hydration?
3. How should the test runner surface synchronization failures to CI pipelines without introducing false positives from network latency?