E2E testing for Clerk apps. Use with Playwright or Cypress for auth flow tests.
Install
npx skills add https://github.com/clerk/skills --skill clerk-testingSKILL.md
Testing
Decision Tree
| Framework | Documentation |
|---|---|
| Overview | https://clerk.com/docs/guides/development/testing/overview |
| Playwright | https://clerk.com/docs/guides/development/testing/playwright/overview |
| Cypress | https://clerk.com/docs/guides/development/testing/cypress/overview |
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 development-instance keys only (
pk_test_*/sk_test_*). If the project has no keys yet,npx clerk@latest init(the Clerk CLI; seeclerk-setup) creates a Clerk application and writes development-instance keys to the env file. No Clerk account or Dashboard visit is needed.
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
Related skills
tddmattpocock979KTest-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.diagnosing-bugsmattpocock678KDiagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.migrate-to-shoehornmattpocock388KMigrate test files from `as` type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace `as` in tests, or needs partial test data.systematic-debuggingobra275KUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes