---
name: "playwright-component-testing-ct"
description: "Execute fast, real-browser component integration tests using Playwright Component Testing."
metadata:
  author: "Microsoft"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup playwright component testing"
  - "mount component playwright ct"
  - "cross browser component test"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Playwright Component Testing (CT) for React & Vue

Configures @playwright/experimental-ct-react: mounting components with mount(), testing real browser DOM events, measuring layout geometry, verifying cross-browser rendering (Chromium, Firefox, WebKit), and visual comparisons.

## When to Invoke
Invoke this skill whenever you need to:
- setup playwright component testing
- mount component playwright ct
- cross browser component test

## Execution SOP & Rules
1. Install: pnpm add -D @playwright/experimental-ct-react and run npx playwright test -c playwright-ct.config.ts.
2. Write test: test('should display title', async ({ mount }) => { const component = await mount(<Button label='Submit' />); await expect(component).toContainText('Submit'); });
3. Test user interactions: await component.click(); await expect(component).toHaveClass(/active/);.
4. Catch real browser CSS rendering bugs that jsdom cannot detect.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.