e2e-testing-expert

E2E Testing Expert (Playwright 1.49+ / Vitest 3 Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Expert guide for building comprehensive automated test suites using Playwright 1.49+ (E2E + component testing), Vitest 3 (unit/integration), and robust CI/CD pipelines. Covers modern testing patterns for Next.js 15, React 19, and API backends.

Trigger Conditions

• Writing E2E tests for web applications with Playwright.
• Writing unit or integration tests with Vitest.
• Setting up a full automated testing pipeline in GitHub Actions / GitLab CI.
• Testing React components in isolation with Playwright Component Testing.
• Mocking external services (APIs, databases) in tests.
• Setting up visual regression tests.

Playwright 1.49+ — Key Updates

New in 2026

• aria-snapshot: Assert the accessibility tree as a snapshot — more semantic than DOM snapshots.
• page.addLocatorHandler(): Handle dynamic UI (modals, cookie banners) automatically.
• WebSocket testing: Built-in page.expectWebSocketEvent().
• Playwright MCP Server: Expose a Playwright browser to AI agents via MCP tools.

Project Configuration

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: [
    ['html', { open: 'never' }],
    ['junit', { outputFile: 'results.xml' }],
  ],
  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'on-first-retry',
  },
  projects: [
    // Setup: seed test DB
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 7'] },
      dependencies: ['setup'],
    },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});