---
name: ecc-e2e-testing
description: End-to-end testing patterns using Playwright or other browser automation tools. Use when writing or reviewing E2E tests for web applications.
---

# E2E Testing

End-to-end testing patterns for web applications.

## When to Activate
- Writing E2E tests for a web application
- Reviewing existing E2E test suites
- Setting up test infrastructure

## Test Structure

### Page Object Pattern
```typescript
class LoginPage {
  async navigate() { await page.goto('/login'); }
  async fillEmail(email: string) { await page.fill('[data-testid=email]', email); }
  async fillPassword(password: string) { await page.fill('[data-testid=password]', password); }
  async submit() { await page.click('[data-testid=submit]'); }
  async waitForDashboard() { await page.waitForURL('/dashboard'); }
}
```

### Test Anatomy
```typescript
test('user can login with valid credentials', async ({ page }) => {
  const login = new LoginPage(page);
  await login.navigate();
  await login.fillEmail('user@example.com');
  await login.fillPassword('password123');
  await login.submit();
  await login.waitForDashboard();
  await expect(page.locator('[data-testid=welcome]')).toContainText('Welcome back');
});
```

## Best Practices

- Use `data-testid` attributes for resilient selectors
- Avoid sleep/timeout — use `waitFor` with assertions
- Test critical user journeys only (login, purchase, search)
- Run tests in parallel using worker processes
- Use fixtures for shared setup

## What to Test
- **Critical paths**: Login, registration, purchase flow
- **Error states**: 404, 500, network errors, validation
- **Edge cases**: Empty states, long text, rapid clicking
- **Responsive**: Mobile, tablet, desktop viewports
