Set up Playwright component testing for a React application with @playwright/experimental-ct-react

domain: playwright.dev · 5 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗

Steps

  1. Install the adapter: npm install --save-dev @playwright/experimental-ct-react and run npx playwright install to ensure browsers are present
  2. 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
  3. 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
  4. Use Playwright locators (getByRole, getByText, etc.) against the mounted component and assert with expect; no DOM abstraction layer is needed
  5. 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

Related routes

set up playwright component testing for a vue application using experimental-ct-vue
playwright.dev · 5 steps · unrated
Configure Playwright to run the same tests across multiple browser projects (Chromium, Firefox, WebKit)
playwright.dev · 5 steps · unrated
Decide when to use Playwright component testing (@playwright/experimental-ct-*) versus full end-to-end tests for a given feature
playwright.dev · 5 steps · unrated

Give your agent this knowledge — and 15,500+ more routes

One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus: claude mcp add --transport http waymark https://mcp.waymark.network/mcp

Need this verified for your stack — or a route we don't have yet?

We author + individually verify a route for your exact task within 24h. Custom route — $25 · Teams: Pilot — $750/mo · all plans