git:20251024.ed129a8 to git:20260119.5684887

---

name: e2e-testing-patterns

description: Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky tests, or establishing testing standards.

---

# E2E Testing Patterns

Build reliable, fast, and maintainable end-to-end test suites that provide confidence to ship code quickly and catch regressions before users do.

## When to Use This Skill

- Implementing end-to-end test automation

- Debugging flaky or unreliable tests

- Testing critical user workflows

- Setting up CI/CD test pipelines

- Testing across multiple browsers

- Validating accessibility requirements

- Testing responsive designs

- Establishing E2E testing standards

## Core Concepts

### 1. E2E Testing Fundamentals

**What to Test with E2E:**

- Critical user journeys (login, checkout, signup)

- Complex interactions (drag-and-drop, multi-step forms)

- Cross-browser compatibility

- Real API integration

- Authentication flows

**What NOT to Test with E2E:**

- Unit-level logic (use unit tests)

- API contracts (use integration tests)

- Edge cases (too slow)

- Internal implementation details

### 2. Test Philosophy

**The Testing Pyramid:**

```

/\

/E2E\ ← Few, focused on critical paths

/─────\

/Integr\ ← More, test component interactions

/────────\

/Unit Tests\ ← Many, fast, isolated

/────────────\

```

**Best Practices:**

- Test user behavior, not implementation

- Keep tests independent

- Make tests deterministic

- Optimize for speed

- Use data-testid, not CSS selectors

## Playwright Patterns

### Setup and Configuration

```typescript

// playwright.config.ts

export default defineConfig({

});

```

### Pattern 1: Page Object Model

```typescript

// pages/LoginPage.ts

export class LoginPage {

}

// Test using Page Object

});

});

```

### Pattern 2: Fixtures for Test Data

```typescript

// fixtures/test-data.ts

type TestData = {

};

export const test = base.extend<TestData>({

});

// Usage in tests

});

```

### Pattern 3: Waiting Strategies

```typescript

// ❌ Bad: Fixed timeouts

// ✅ Good: Wait for specific conditions

await page.waitForSelector('[data-testid="user-profile"]');

// ✅ Better: Auto-waiting with assertions

// Wait for API response

const responsePromise = page.waitForResponse(

);

const response = await responsePromise;

const data = await response.json();

expect(data.users).toHaveLength(10);

// Wait for multiple conditions

await Promise.all([

]);

```

### Pattern 4: Network Mocking and Interception

```typescript

// Mock API responses

});

});

// Intercept and modify requests

});

});

// Mock third-party services

});

});

```

## Cypress Patterns

### Setup and Configuration

```typescript

// cypress.config.ts

export default defineConfig({

},

});

```

### Pattern 1: Custom Commands

```typescript

// cypress/support/commands.ts

declare global {

}

}

});

});

});

// Usage

```

### Pattern 2: Cypress Intercept

```typescript

// Mock API calls

// Modify responses

});

// Simulate slow network

});

```

## Advanced Patterns

### Pattern 1: Visual Regression Testing

```typescript

// With Playwright

});

});

```

### Pattern 2: Parallel Testing with Sharding

```typescript

// playwright.config.ts

export default defineConfig({

});

// Run in CI

// npx playwright test --shard=1/4

// npx playwright test --shard=2/4

```

### Pattern 3: Accessibility Testing

```typescript

// Install: npm install @axe-core/playwright

});

});

```

## Best Practices

1. **Use Data Attributes**: `data-testid` or `data-cy` for stable selectors

2. **Avoid Brittle Selectors**: Don't rely on CSS classes or DOM structure

3. **Test User Behavior**: Click, type, see - not implementation details

4. **Keep Tests Independent**: Each test should run in isolation

5. **Clean Up Test Data**: Create and destroy test data in each test

6. **Use Page Objects**: Encapsulate page logic

7. **Meaningful Assertions**: Check actual user-visible behavior

8. **Optimize for Speed**: Mock when possible, parallel execution

```typescript

// ❌ Bad selectors

// ✅ Good selectors

```

## Common Pitfalls

- **Flaky Tests**: Use proper waits, not fixed timeouts

- **Slow Tests**: Mock external APIs, use parallel execution

- **Over-Testing**: Don't test every edge case with E2E

- **Coupled Tests**: Tests should not depend on each other

- **Poor Selectors**: Avoid CSS classes and nth-child

- **No Cleanup**: Clean up test data after each test

- **Testing Implementation**: Test user behavior, not internals

## Debugging Failing Tests

```typescript

// Playwright debugging

// 1. Run in headed mode

npx playwright test --headed

// 2. Run in debug mode

npx playwright test --debug

// 3. Use trace viewer

await page.screenshot({ path: 'screenshot.png' });

await page.video()?.saveAs('video.webm');

// 4. Add test.step for better reporting

test('checkout flow', async ({ page }) => {

await test.step('Add item to cart', async () => {

await page.goto('/products');

await page.getByRole('button', { name: 'Add to Cart' }).click();

});

await test.step('Proceed to checkout', async () => {

await page.goto('/cart');

await page.getByRole('button', { name: 'Checkout' }).click();

});

});

// 5. Inspect page state

await page.pause(); // Pauses execution, opens inspector

```

## Resources

- **references/playwright-best-practices.md**: Playwright-specific patterns

- **references/cypress-best-practices.md**: Cypress-specific patterns

- **references/flaky-test-debugging.md**: Debugging unreliable tests

- **assets/e2e-testing-checklist.md**: What to test with E2E

- **assets/selector-strategies.md**: Finding reliable selectors

- **scripts/test-analyzer.ts**: Analyze test flakiness and duration