Component Testing in Playwright

Playwright Component Testing (CT) mounts individual UI components in a real browser using your project's build tooling — without spinning up the full app, router, or backend. It complements E2E tests with faster feedback on component permutations.

Mounting Components

Install @playwright/experimental-ct-react (or -vue, -svelte), configure playwright-ct.config.ts, and use the mount fixture instead of page.goto().

Component tests excel at prop variations, error states, and edge-case UI — reserve E2E for full user journeys that span multiple pages and real APIs.

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

test('renders label', async ({ mount }) => {
  const component = await mount(<Button label="Save" />);
  await expect(component).toContainText('Save');
});

CT uses a separate config file from your E2E playwright.config.ts.

CT vs E2E

// Component test — mount fixture
test('button', async ({ mount }) => { ... });

// E2E test — page fixture
test('checkout flow', async ({ page }) => { ... });

CT requires framework-specific experimental package.
mount() renders component in isolated browser context.
Mock props and callbacks directly — no API stubs needed for pure UI.
Keep E2E suite smaller; cover permutations here.

Component Testing Reference

CT setup and APIs.

Item	Details
`@playwright/experimental-ct-react`	React CT package
`playwright-ct.config.ts`	Separate CT configuration
`mount` fixture	Render component under test
Props variation	Multiple tests with different props
Event callbacks	Spy on props like `onClick`
vs E2E	CT faster; E2E full-stack confidence

Component Test Configuration

CT config points to your Vite/webpack setup so components compile with the same transforms as production. Misaligned config causes "component renders blank" mysteries.

Where CT Fits in the Pyramid

Many component tests, fewer integration tests, fewest E2E journeys. CT replaces brittle E2E tests that only checked one button's disabled state.

Common Mistakes

Using E2E tests for every prop permutation — slow and expensive.
Sharing one playwright.config between CT and E2E without separate projects.
Not providing context providers (theme, router) in mount wrappers.
Expecting CT to validate real API contracts — use request fixture for that.

Key Takeaways

CT mounts components with mount fixture in real browsers.
Use framework-specific @playwright/experimental-ct-* packages.
Cover UI permutations in CT; reserve E2E for critical journeys.
Configure CT separately from E2E in playwright-ct.config.ts.

Pro Tip

Create a TestWrapper component that provides theme and i18n context — reuse it in every mount() call.