Component Testing with Playwright

1 The Hook

A Wellington SaaS team has a complex date range picker component used in 12 different places across their app. E2E tests for date scenarios take 45 seconds each: full app load, auth, navigation to the page that contains the picker, then the interaction itself.

They have 8 edge cases to cover: timezone crossing, daylight saving, date order validation, min/max bounds, and four more. That’s 6 minutes of E2E test time for one component.

With Playwright component testing, each scenario runs in 800ms. The component mounts directly in the browser without the full app around it. The full 8 edge cases complete in 6.4 seconds.

45× faster. Same browser. Same assertions. The only difference is isolation.

2 The Rule

3 The Analogy

4 Watch Me Do It

Setup — initialise Playwright CT in an existing project:

npm init playwright@latest -- --ct
# Follow the prompts: choose React, Vue, or Svelte

This adds a playwright/index.html entry point and a separate CT config. Your existing E2E tests are unaffected.

The component — a KiwiSaver contribution calculator:

// KiwiSaverCalculator.tsx
interface Props {
  grossSalary: number;
  contributionRate: 3 | 4 | 6 | 8 | 10;
}

export function KiwiSaverCalculator({ grossSalary, contributionRate }: Props) {
  const annual = grossSalary * (contributionRate / 100);
  const employerMatch = annual * 3 / contributionRate;
  return (
    <div data-testid="calculator">
      <p>Annual contribution: <strong>${annual.toFixed(2)}</strong></p>
      <p>Employer match: <strong>${employerMatch.toFixed(2)}</strong></p>
    </div>
  );
}

The component tests:

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

test('calculates 3% contribution correctly', async ({ mount }) => {
  const component = await mount(
    <KiwiSaverCalculator grossSalary={80000} contributionRate={3} />
  );
  await expect(component.getByText('$2400.00')).toBeVisible();
});

test('calculates 10% contribution correctly', async ({ mount }) => {
  const component = await mount(
    <KiwiSaverCalculator grossSalary={80000} contributionRate={10} />
  );
  await expect(component.getByText('$8000.00')).toBeVisible();
});

test('all valid contribution rates render without error', async ({ mount }) => {
  for (const rate of [3, 4, 6, 8, 10] as const) {
    const component = await mount(
      <KiwiSaverCalculator grossSalary={60000} contributionRate={rate} />
    );
    await expect(component.getByTestId('calculator')).toBeVisible();
  }
});

Run component tests separately from E2E tests:

npx playwright test --config=playwright-ct.config.ts

5 When to Use It

Good candidates for component testing:

• Components with complex computation or state logic (calculators, formatters, validators)
• Date pickers, multi-step forms, currency inputs
• Components used in many places — high ROI on isolation tests
• Components where an E2E test takes more than 20 seconds to reach the interaction point

Not suited for component testing:

• Simple presentational components with no logic (a styled button, a static card)
• Integration scenarios that require real API calls or routing
• User journeys that span multiple pages — that is what E2E is for

6 Common Mistakes

7 Now You Try

8 Self-Check

Click each question to reveal the answer.

9 ISTQB Mapping

10 Next Steps