clerk-testing
作者: clerk
針對 Clerk 身份驗證流程在 Playwright 與 Cypress 中的端到端測試工具。支援 Playwright 與 Cypress 框架,並提供框架專屬的設定模式(Playwright 的 globalSetup、Cypress 的自訂指令)。提供 clerkSetup() 與 setupClerkTestingToken() 工具,用於初始化測試環境並繞過機器人偵測。包含 storageState 持久化功能,可跨測試重複使用已驗證的工作階段,減少測試執行時間。需要測試 API 金鑰(pk_test_*、...)。
npx skills add https://github.com/clerk/skills --skill clerk-testingTesting
Decision Tree
Mental Model
Test auth = isolated session state. Each test needs fresh auth context.
clerkSetup()initializes test environmentsetupClerkTestingToken()bypasses bot detectionstorageStatepersists auth between tests for speed
Workflow
- Identify test framework (Playwright or Cypress)
- WebFetch the appropriate URL from decision tree above
- Follow official setup instructions
- Use
pk_test_*andsk_test_*keys only
Best Practices
- Use
setupClerkTestingToken()before navigating to auth pages - Use test API keys:
pk_test_xxx,sk_test_xxx - Save auth state with
storageStatefor faster tests - Use
page.waitForSelector('[data-clerk-component]')for Clerk UI
Anti-Patterns
| Pattern | Problem | Fix |
|---|---|---|
| Production keys in tests | Security risk | Use pk_test_* keys |
No setupClerkTestingToken() | Auth fails | Call before navigation |
| UI-based sign-in every test | Slow tests | Use storageState |
Framework-Specific
Playwright: Use globalSetup for auth state
Cypress: Add addClerkCommands({ Cypress, cy }) to support file
See Also
clerk-setup- Install Clerk before adding testsclerk-nextjs-patterns- Next.js patterns being tested- Demo Repo