Install the adapter: npm install --save-dev @playwright/experimental-ct-react and run npx playwright install to ensure browsers are present
Create a playwright/index.html entry point and a playwright/index.tsx (or .jsx) file that imports any global styles or providers needed by components
Write a test file importing mount from @playwright/experimental-ct-react, then call mount(<MyComponent />) inside a test to render the component in a real browser
Use Playwright locators (getByRole, getByText, etc.) against the mounted component and assert with expect; no DOM abstraction layer is needed
Run tests with npx playwright test --config=playwright-ct.config.ts; a separate config file pointing to the ct adapter is required alongside any existing e2e config
Known gotchas
The 'experimental' label has been stable in practice for several Playwright versions, but the package name may change when the feature graduates — check the current package name before starting
Vite is used internally; if your project uses a different bundler for production, component tests may behave slightly differently (e.g., module resolution) than the production build
Component tests run in real browsers, so they require the browsers to be installed and cannot run in jsdom environments — CI pipelines must have headless browser support
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp