e2e-testing-patterns
建立可靠的端到端測試套件
端到端測試可以在用戶發現之前捕捉關鍵錯誤，但不穩定的測試會減慢部署速度並削弱信心。本技能教授使用 Playwright 和 Cypress 建立快速、可靠的 E2E 測試套件的經過驗證的模式，在不減慢團隊速度的情況下提高程式碼品質。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「e2e-testing-patterns」。 Create a custom Cypress command for user login
預期結果:
Generated a custom Cypress command that accepts email and password parameters, navigates to the login page, fills in credentials using data-testid selectors, clicks the submit button, and verifies successful redirect to the dashboard. Includes TypeScript type definitions for IDE autocomplete support.
正在使用「e2e-testing-patterns」。 How do I make this test less flaky?
預期結果:
Identified three flakiness sources: fixed timeout waits should be replaced with conditional waits, CSS class selectors should use data-testid attributes, and parallel tests share state through global variables. Provided specific code changes with proper waitForLoadState, role-based selectors, and isolated test fixtures.
正在使用「e2e-testing-patterns」。 Set up visual regression testing with Playwright
預期結果:
Created a visual regression test pattern that captures full-page screenshots, handles different viewport sizes, excludes dynamic content like timestamps, and uses pixel difference thresholds to reduce false positives. Includes baseline generation workflow and CI integration steps.
安全審計
安全This skill provides educational content for end-to-end testing patterns with Playwright and Cypress. All static findings are false positives: weak crypto detections are from filename patterns, backtick executions are code examples in documentation, environment variable access is legitimate test configuration, and hardcoded URLs are localhost test endpoints. No security risks identified.
品質評分
你能建構什麼
QA 工程師建立測試自動化
品質保證工程師需要為新專案建立 E2E 測試標準。他們使用此技能生成頁面物件模型、設置 CI/CD 整合，並實作可靠的等待策略以減少測試不穩定性。
前端開發人員測試用戶流程
前端開發人員想要為關鍵用戶工作流程（如身份驗證和結帳）添加 E2E 測試。他們使用此技能建立網路模擬模式、自定義 fixtures 和可存取性測試，以便及早捕捉回歸問題。
技術主管建立測試標準
技術主管需要在多個團隊中建立 E2E 測試最佳實踐。他們使用此技能記錄選擇器策略、平行測試模式和除錯方法，以提高測試套件的可維護性。
試試這些提示
Create a Page Object Model for a login page with email, password fields, and error handling using Playwright
Review this test and suggest fixes for flaky behavior caused by timing issues and race conditions
Create network interception patterns to mock API failures and edge cases for a user profile page
Design a sharding strategy to run 200 E2E tests across 4 CI workers with optimal distribution
最佳實務
- 使用語義選擇器如 getByRole 和 getByLabel 而不是 CSS 類別來建立能承受 UI 重構的穩定測試
- 使用條件等待和斷言而不是固定超時來實作適當的等待策略，以消除不穩定的測試
- 透過隔離的 fixtures 和清理保持測試獨立，以啟用平行執行和可靠的測試運行
避免
- 使用固定超時如 waitForTimeout 而不是等待特定條件會導致不可靠的測試間歇性失敗
- 測試實作細節或內部狀態而不是用戶可見的行為會產生脆弱的測試，在重構時會出問題
- 在測試之間共享狀態或依賴測試執行順序會阻止平行執行並導致連鎖失敗