技能 e2e-testing-patterns
📦
Writing end-to-end tests is challenging. This skill provides battle-tested patterns for Playwright and Cypress to create stable, maintainable tests that catch bugs before users do.
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「e2e-testing-patterns」。 Create a login test with Playwright
預期結果:
- Step 1: Create LoginPage class with locators for email, password, and submit button
- Step 2: Implement goto() and login(email, password) methods
- Step 3: Write test using page object with assertions for URL and success message
- Step 4: Add error handling test for invalid credentials
正在使用「e2e-testing-patterns」。 How do I debug a flaky test?
預期結果:
- 1. Replace fixed waitForTimeout with explicit waits
- 2. Use trace viewer: npx playwright test --trace on
- 3. Add screenshots on failure
- 4. Check for race conditions in async operations
- 5. Isolate test data to prevent cross-test pollution
安全審計
安全v1 • 2/24/2026
All 63 static findings are false positives. The analyzer incorrectly interprets markdown code fences as Ruby shell commands, JavaScript operators as cryptographic issues, and test configuration as system reconnaissance. This is a documentation skill with educational content about E2E testing patterns using Playwright and Cypress. No actual security risks exist.
2
已掃描檔案
576
分析行數
3
發現項
1
審計總數
風險因素
⚙️ 外部命令 (32)
resources/implementation-playbook.md:25-33 resources/implementation-playbook.md:33-46 resources/implementation-playbook.md:46-77 resources/implementation-playbook.md:77-81 resources/implementation-playbook.md:81-137 resources/implementation-playbook.md:137-141 resources/implementation-playbook.md:141-160 resources/implementation-playbook.md:160-194 resources/implementation-playbook.md:194-198 resources/implementation-playbook.md:198-227 resources/implementation-playbook.md:227-231 resources/implementation-playbook.md:231-277 resources/implementation-playbook.md:277-283 resources/implementation-playbook.md:283-301 resources/implementation-playbook.md:301-305 resources/implementation-playbook.md:305-331 resources/implementation-playbook.md:331-337 resources/implementation-playbook.md:337-341 resources/implementation-playbook.md:341-371 resources/implementation-playbook.md:371-377 resources/implementation-playbook.md:377-405 resources/implementation-playbook.md:405-409 resources/implementation-playbook.md:409-431 resources/implementation-playbook.md:431-435 resources/implementation-playbook.md:435-459 resources/implementation-playbook.md:459-463 resources/implementation-playbook.md:463 resources/implementation-playbook.md:463-472 resources/implementation-playbook.md:472-481 resources/implementation-playbook.md:481-495 resources/implementation-playbook.md:495-522 SKILL.md:43
🌐 網路存取 (4)
🔑 環境變數 (8)
resources/implementation-playbook.md:57 resources/implementation-playbook.md:58 resources/implementation-playbook.md:59 resources/implementation-playbook.md:174 resources/implementation-playbook.md:57 resources/implementation-playbook.md:58 resources/implementation-playbook.md:59 resources/implementation-playbook.md:174
審計者: claude
品質評分
38
架構
100
可維護性
85
內容
50
社群
100
安全
100
規範符合性
你能建構什麼
Set Up E2E Tests for New Project
Configure Playwright or Cypress from scratch with proper structure, reporters, and CI integration
Fix Flaky Tests
Replace brittle selectors and fixed timeouts with proper waiting strategies and stable locators
Scale Test Execution
Implement parallel execution and test sharding to reduce CI pipeline time from hours to minutes
試試這些提示
Create Login Test
Create an end-to-end test for a login page using Playwright. Include proper selectors, assertions, and error handling for both successful and failed login attempts.
Mock API Response
Show how to mock an API response in Cypress to test error handling without relying on a real backend service.
Set Up CI Pipeline
Configure Playwright to run tests in CI with parallel execution, retry logic, and HTML report generation.
Accessibility Testing
Implement accessibility testing using axe-core to ensure the application meets WCAG guidelines.
最佳實務
- Use data-testid or semantic roles instead of CSS selectors for stable locators
- Keep tests independent with proper setup and teardown of test data
- Run tests in parallel in CI to reduce execution time
避免
- Using fixed timeouts like waitForTimeout(3000) - causes flakiness
- Testing implementation details instead of user-visible behavior
- Sharing state between tests - leads to cascade failures
常見問題
Playwright vs Cypress: Which should I choose?
Playwright offers better cross-browser support and faster execution. Cypress has a more mature ecosystem and easier debugging. Choose based on your browser requirements and team familiarity.
How do I make tests less flaky?
Use explicit waits instead of timeouts, avoid testing implementation details, ensure test data is properly isolated, and add retry logic for network-dependent operations.
How do I run tests in parallel?
Configure Playwright workers or Cypress parallelization. Use test sharding to split tests across multiple machines in CI. Ensure tests are independent to avoid conflicts.
Can I test APIs with E2E tools?
Yes, both Playwright and Cypress support API testing. Use page.request() in Playwright or cy.request() in Cypress for direct API calls without UI interaction.
How do I handle authentication in tests?
Use API login to set cookies or tokens, or use browser storage APIs to set session data directly. Avoid UI login in every test for better performance.
What is the Page Object Model?
A design pattern that encapsulates page-specific logic and selectors in a class. Improves test maintainability by centralizing page changes in one place rather than across all tests.