e2e-testing-expert

E2E Testing Expert (Playwright 1.50+ & Vitest 3 Standard)

English | Bahasa Indonesia

---

English

Orchestration & Integration

• TDD & Autonomous Debugging: autonomous-tdd-debugger, property-mutation-testing-expert
• Quality Gates & Anti-Slop: anti-slop, ai-code-review-autonomous, zero-tech-debt-auditor
• Accessibility & Browser Automation: accessibility-testing-expert, browser-automation-expert
• CI/CD & DevOps Automation: ci-cd-devops-architect, github-actions-expert
• Lifecycle & Governance: brainstorming, zero-to-prod-orchestrator, session-memory-manager

Description

Production-grade guide for automated browser and component testing using Playwright 1.50+ and Vitest 3+. Covers virtual clock manipulation with page.clock, semantic accessibility assertions with toMatchAriaSnapshot, type-safe composable fixtures, dynamic UI banner interception (page.addLocatorHandler), session state reuse (storageState), and CI matrix sharding.

Trigger Conditions

• Writing End-to-End (E2E) browser test suites for Next.js 15, React 19, or Svelte 5 applications.
• Testing time-sensitive UI (countdown timers, session expiries, debounced search) deterministically.
• Verifying WCAG accessibility tree structure using semantic aria-snapshot.
• Creating composable test fixtures with authenticated contexts and isolated database state.
• Setting up parallel CI test execution with artifact uploads on test failure.

---

Playwright 1.50+ Core Architectural Patterns

1. Deterministic Time Testing with the Clock API (page.clock)

Eliminate flaky page.waitForTimeout by freezing, fast-forwarding, or setting system time:

// tests/e2e/timer.spec.ts
import { test, expect } from '@playwright/test';

test('advances countdown timer deterministically', async ({ page }) => {
  // 1. Install virtual clock fixed at specific timestamp
  await page.clock.install({ time: new Date('2026-03-01T12:00:00Z') });
  await page.goto('/promotions/flash-sale');

  // Verify initial state
  const countdown = page.getByRole('timer');
  await expect(countdown).toHaveText('24:00:00');

  // 2. Fast forward 6 hours in 1 millisecond without waiting!
  await page.clock.fastForward('06:00:00');
  await expect(countdown).toHaveText('18:00:00');

  // 3. Fast forward past expiration
  await page.clock.fastForward('18:00:01');
  await expect(page.getByRole('alert')).toHaveText('This promotion has ended.');
});