{"id":"e2e-testing-patterns","name":"e2e-testing-patterns","summary":"PlaywrightとCypressを使ったエンドツーエンドテストをマスターし、バグを検出し、信頼を高め、迅速な展開を可能にする信頼性の高いテストスイートを構築しましょう。","body":"# E2E Testing Patterns\n\nBuild reliable, fast, and maintainable end-to-end test suites that provide confidence to ship code quickly and catch regressions before users do.\n\n## When to Use This Skill\n\n- Implementing end-to-end test automation\n- Debugging flaky or unreliable tests\n- Testing critical user workflows\n- Setting up CI/CD test pipelines\n- Testing across multiple browsers\n- Validating accessibility requirements\n- Testing responsive designs\n- Establishing E2E testing standards\n\n## Core Concepts\n\n### 1. E2E Testing Fundamentals\n\n**What to Test with E2E:**\n\n- Critical user journeys (login, checkout, signup)\n- Complex interactions (drag-and-drop, multi-step forms)\n- Cross-browser compatibility\n- Real API integration\n- Authentication flows\n\n**What NOT to Test with E2E:**\n\n- Unit-level logic (use unit tests)\n- API contracts (use integration tests)\n- Edge cases (too slow)\n- Internal implementation details\n\n### 2. Test Philosophy\n\n**The Testing Pyramid:**\n\n```\n        /\\\n       /E2E\\         ← Few, focused on critical paths\n      /─────\\\n     /Integr\\        ← More, test component interactions\n    /────────\\\n   /Unit Tests\\      ← Many, fast, isolated\n  /────────────\\\n```\n\n**Best Practices:**\n\n- Test user behavior, not implementation\n- Keep tests independent\n- Make tests deterministic\n- Optimize for speed\n- Use data-testid, not CSS selectors\n\n## Detailed patterns and worked examples\n\nDetailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.\n\n## Best Practices\n\n1. **Use Data Attributes**: `data-testid` or `data-cy` for stable selectors\n2. **Avoid Brittle Selectors**: Don't rely on CSS classes or DOM structure\n3. **Test User Behavior**: Click, type, see - not implementation details\n4. **Keep Tests Independent**: Each test should run in isolation\n5. **Clean Up Test Data**: Create and destroy test data in each test\n6. **Use Page Objects**: Encapsulate page logic\n7. **Meaningful Assertions**: Check actual user-visible behavior\n8. **Optimize for Speed**: Mock when possible, parallel execution\n\n```typescript\n// ❌ Bad selectors\ncy.get(\".btn.btn-primary.submit-button\").click();\ncy.get(\"div > form > div:nth-child(2) > input\").type(\"text\");\n\n// ✅ Good selectors\ncy.getByRole(\"button\", { name: \"Submit\" }).click();\ncy.getByLabel(\"Email address\").type(\"user@example.com\");\ncy.get('[data-testid=\"email-input\"]').type(\"user@example.com\");\n```\n\n## Common Pitfalls\n\n- **Flaky Tests**: Use proper waits, not fixed timeouts\n- **Slow Tests**: Mock external APIs, use parallel execution\n- **Over-Testing**: Don't test every edge case with E2E\n- **Coupled Tests**: Tests should not depend on each other\n- **Poor Selectors**: Avoid CSS classes and nth-child\n- **No Cleanup**: Clean up test data after each test\n- **Testing Implementation**: Test user behavior, not internals\n\n## Debugging Failing Tests\n\n```typescript\n// Playwright debugging\n// 1. Run in headed mode\nnpx playwright test --headed\n\n// 2. Run in debug mode\nnpx playwright test --debug\n\n// 3. Use trace viewer\nawait page.screenshot({ path: 'screenshot.png' });\nawait page.video()?.saveAs('video.webm');\n\n// 4. Add test.step for better reporting\ntest('checkout flow', async ({ page }) => {\n    await test.step('Add item to cart', async () => {\n        await page.goto('/products');\n        await page.getByRole('button', { name: 'Add to Cart' }).click();\n    });\n\n    await test.step('Proceed to checkout', async () => {\n        await page.goto('/cart');\n        await page.getByRole('button', { name: 'Checkout' }).click();\n    });\n});\n\n// 5. Inspect page state\nawait page.pause();  // Pauses execution, opens inspector\n```","author":"@wshobson","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/wshobson/agents/tree/main/plugins/developer-essentials/skills/e2e-testing-patterns","license":"MIT","category":"testing","lang":"en","tokens":888,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"references/details.md","size":10286,"sha256":"3b6a4f1e1298aeeedefe9922c199c0549b2a74780429bd907c5aae8245f320c4"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}