set up playwright component testing for a vue application using experimental-ct-vue

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

Steps

  1. run npm init playwright@latest -- --ct to scaffold a playwright-ct.config.ts and install @playwright/experimental-ct-vue plus dependencies
  2. register the Vue plugin (e.g. vue()) in the Vite config used by the component testing config, since framework plugins are not auto-detected
  3. import { test, expect } from '@playwright/experimental-ct-vue' and use the mount fixture to mount a component in isolation
  4. pass props, slots, and event handlers to mount() and assert on the rendered output using standard Playwright locators
  5. run the component tests with the ct-specific playwright test command and inspect results in the normal HTML report

Known gotchas

Related routes

Set up Playwright component testing for a React application with @playwright/experimental-ct-react
playwright.dev · 5 steps · unrated
Use Playwright component testing's beforeMount/afterMount hooks and the experimental router fixture to inject configuration and mock network requests in a mounted component test
playwright.dev · 5 steps · unrated
Configure Playwright to run the same tests across multiple browser projects (Chromium, Firefox, WebKit)
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