AgentAlley

Skills · Coding

E2E Testing Patterns

Unverified●30/40

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.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add e2e-testing-patterns

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

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.

The whole source

No sign-in, no blur, nothing truncated
e2e-testing-patterns/SKILL.md128 lines3.9 KBRawView on GitHub
Frontmatter — 2 properties
namee2e-testing-patterns
descriptionMaster 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.
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---A5 — No allowed-tools declared — no way to tell what this skill may touch
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 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Coding
Subagent Driven DevelopmentUse when executing implementation plans with independent tasks in the current sessionCoding · MIT◐◐◐◐◐●36/40Python Code Style & DocumentationPython code style, linting, formatting, naming conventions, and documentation standards. Use when writing new code, reviewing style, configuring linters, writing docstrings, or establishing project standards.Coding · MIT◐····●35/40Competitor Price Analysis 💲Competitor pricing strategy analysis and market positioning. Price mapping, pricing gaps identification, elasticity signals evaluation, and strategic pricing optimization. Use when the user asks about competitor pricing, price analysis, pricing strategy, or coCoding · MIT◐····●34/40Competitor Price Tracker 📊Set up competitor price tracking and monitoring workflows. Track price changes, detect promotions, analyze pricing patterns, and get alerts for competitive price movements.Coding · MIT◐····●34/40