1---
2name: e2e-testing-patterns
3description: 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.
4---
5 
6# E2E Testing Patterns
7 
8Build reliable, fast, and maintainable end-to-end test suites that provide confidence to ship code quickly and catch regressions before users do.
9 
10## When to Use This Skill
11 
12- Implementing end-to-end test automation
13- Debugging flaky or unreliable tests
14- Testing critical user workflows
15- Setting up CI/CD test pipelines
16- Testing across multiple browsers
17- Validating accessibility requirements
18- Testing responsive designs
19- Establishing E2E testing standards
20 
21## Core Concepts
22 
23### 1. E2E Testing Fundamentals
24 
25**What to Test with E2E:**
26 
27- Critical user journeys (login, checkout, signup)
28- Complex interactions (drag-and-drop, multi-step forms)
29- Cross-browser compatibility
30- Real API integration
31- Authentication flows
32 
33**What NOT to Test with E2E:**
34 
35- Unit-level logic (use unit tests)
36- API contracts (use integration tests)
37- Edge cases (too slow)
38- Internal implementation details
39 
40### 2. Test Philosophy
41 
42**The Testing Pyramid:**
43 
44```
45        /\
46       /E2E\         ← Few, focused on critical paths
47      /─────\
48     /Integr\        ← More, test component interactions
49    /────────\
50   /Unit Tests\      ← Many, fast, isolated
51  /────────────\
52```
53 
54**Best Practices:**
55 
56- Test user behavior, not implementation
57- Keep tests independent
58- Make tests deterministic
59- Optimize for speed
60- Use data-testid, not CSS selectors
61 
62## Detailed patterns and worked examples
63 
64Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.
65 
66## Best Practices
67 
681. **Use Data Attributes**: `data-testid` or `data-cy` for stable selectors
692. **Avoid Brittle Selectors**: Don't rely on CSS classes or DOM structure
703. **Test User Behavior**: Click, type, see - not implementation details
714. **Keep Tests Independent**: Each test should run in isolation
725. **Clean Up Test Data**: Create and destroy test data in each test
736. **Use Page Objects**: Encapsulate page logic
747. **Meaningful Assertions**: Check actual user-visible behavior
758. **Optimize for Speed**: Mock when possible, parallel execution
76 
77```typescript
78// ❌ Bad selectors
79cy.get(".btn.btn-primary.submit-button").click();
80cy.get("div > form > div:nth-child(2) > input").type("text");
81 
82// ✅ Good selectors
83cy.getByRole("button", { name: "Submit" }).click();
84cy.getByLabel("Email address").type("[email protected]");
85cy.get('[data-testid="email-input"]').type("[email protected]");
86```
87 
88## Common Pitfalls
89 
90- **Flaky Tests**: Use proper waits, not fixed timeouts
91- **Slow Tests**: Mock external APIs, use parallel execution
92- **Over-Testing**: Don't test every edge case with E2E
93- **Coupled Tests**: Tests should not depend on each other
94- **Poor Selectors**: Avoid CSS classes and nth-child
95- **No Cleanup**: Clean up test data after each test
96- **Testing Implementation**: Test user behavior, not internals
97 
98## Debugging Failing Tests
99 
100```typescript
101// Playwright debugging
102// 1. Run in headed mode
103npx playwright test --headed
104 
105// 2. Run in debug mode
106npx playwright test --debug
107 
108// 3. Use trace viewer
109await page.screenshot({ path: 'screenshot.png' });
110await page.video()?.saveAs('video.webm');
111 
112// 4. Add test.step for better reporting
113test('checkout flow', async ({ page }) => {
114    await test.step('Add item to cart', async () => {
115        await page.goto('/products');
116        await page.getByRole('button', { name: 'Add to Cart' }).click();
117    });
118 
119    await test.step('Proceed to checkout', async () => {
120        await page.goto('/cart');
121        await page.getByRole('button', { name: 'Checkout' }).click();
122    });
123});
124 
125// 5. Inspect page state
126await page.pause();  // Pauses execution, opens inspector
127```
128