The Complete Production SOP: How to Deploy and Run Playwright Component Testing (CT) for React & Vue in Autonomous AI Agents

---
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
---

# Execution SOP
1. Install: pnpm add -D @playwright/experimental-ct-react @playwright/test
2. Initialize configuration: playwright-ct.config.ts targeting Chromium, Firefox, WebKit.
3. Create tests matching *.spec.tsx containing import { test, expect } from '@playwright/experimental-ct-react'.
4. Always mount via `const component = await mount(<Component {...props} />);`
5. Verify visual state with `await expect(component).toBeVisible();` and validate real user interaction.

import { defineConfig, devices } from '@playwright/experimental-ct-react';
import path from 'path';

export default defineConfig({
  testDir: './src',
  testMatch: /.*\.spec\.(tsx|jsx)/,
  snapshotDir: './__snapshots__',
  timeout: 10 * 1000,
  fullyParallel: true,
  use: {
    trace: 'on-first-retry',
    ctPort: 3100,
    ctViteConfig: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
    },
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

import { test, expect } from '@playwright/experimental-ct-react';
import { Modal } from './Modal';

test.use({ viewport: { width: 500, height: 500 } });

test('should trap focus and dismiss on backdrop click', async ({ mount, page }) => {
  let closed = false;
  const component = await mount(
    <Modal isOpen={true} title="Confirm Action" onClose={() => { closed = true; }}>
      <p>Body Content</p>
    </Modal>
  );

  await expect(component.getByRole('heading', { name: 'Confirm Action' })).toBeVisible();
  
  // Test real browser pointer coordinates outside modal container
  await page.mouse.click(10, 10);
  expect(closed).toBe(true);
});