Executive Summary

This proposal outlines a TypeScript-based end-to-end testing strategy using Playwright for the new React admin UI in the epic/ui-rewrite branch. Using TypeScript aligns with the client's tech stack and provides better type safety, IDE support, and maintainability.

Why TypeScript Playwright?

Advantages Over Python Playwright

Integration Benefits

• Shared Types: Import types from client/src/ directly
• Shared Utilities: Reuse API client, helpers, constants
• Unified Tooling: Same linters, formatters, build tools
• Better DX: Hot reload, fast feedback, familiar patterns

Test Examples

E.g. Smoke Test (e2e/smoke/app-loads.spec.ts)

import { test, expect } from '@playwright/test';

test.describe('App Loading', () => {
  test('should load without console errors', async ({ page }) => {
    const errors: string[] = [];
    
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
      }
    });
    
    await page.goto('/app');
    await page.waitForLoadState('networkidle');
    
    expect(errors).toHaveLength(0);
  });
  
  test('should display login page for unauthenticated users', async ({ page }) => {
    await page.goto('/app');
    
    // Should redirect to login
    await expect(page).toHaveURL(/\/app\/login/);
    await expect(page.locator('h1')).toContainText('Login');
    await expect(page.locator('input[name="email"]')).toBeVisible();
    await expect(page.locator('input[name="password"]')).toBeVisible();
  });
});

Success Metrics

Coverage Targets

• Smoke Tests: 100% of critical paths
• Auth Tests: 100% of flows
• CRUD Tests: 80% of operations
• Workflows: 70% of user journeys
• Security: 100% of attack vectors

Performance Targets

• Smoke Suite: < 2 minutes
• Full Suite: < 15 minutes (parallel)
• CI Pipeline: < 20 minutes total

Quality Targets

• Flakiness: < 1%
• False Positives: < 2%
• Maintenance: < 10% of dev time

Advantages Summary

1. Type Safety: Full TypeScript support, catch errors at compile time
2. Code Sharing: Import types, utilities from client code
3. Better DX: Same tools, faster feedback, familiar patterns
4. Team Efficiency: Single language, easier onboarding
5. Maintainability: Refactoring support, better IDE integration
6. Modern Tooling: Playwright UI, trace viewer, codegen

Conclusion

TypeScript Playwright tests provide superior integration with the new React UI, better type safety, and improved developer experience. The proposed architecture leverages the existing client infrastructure while providing comprehensive E2E coverage.