clerk-testing

โดย clerk

ยูทิลิตี้สำหรับการทดสอบ E2E สำหรับโฟลว์การตรวจสอบสิทธิ์ของ Clerk ใน Playwright และ Cypress รองรับทั้งเฟรมเวิร์ก Playwright และ Cypress พร้อมรูปแบบการตั้งค่าเฉพาะเฟรมเวิร์ก (globalSetup สำหรับ Playwright, คำสั่งที่กำหนดเองสำหรับ Cypress) มียูทิลิตี้ clerkSetup() และ setupClerkTestingToken() เพื่อเริ่มต้นสภาพแวดล้อมการทดสอบและหลีกเลี่ยงการตรวจจับบอท รวมถึงการคงสถานะ storageState เพื่อนำเซสชันที่ตรวจสอบสิทธิ์แล้วกลับมาใช้ใหม่ในการทดสอบ ลดระยะเวลาการดำเนินการทดสอบ ต้องใช้คีย์ API สำหรับทดสอบ ( pk_test_* ,...

npx skills add https://github.com/clerk/skills --skill clerk-testing

Testing

Decision Tree

FrameworkDocumentation
Overviewhttps://clerk.com/docs/guides/development/testing/overview
Playwrighthttps://clerk.com/docs/guides/development/testing/playwright/overview
Cypresshttps://clerk.com/docs/guides/development/testing/cypress/overview

Mental Model

Test auth = isolated session state. Each test needs fresh auth context.

  • clerkSetup() initializes test environment
  • setupClerkTestingToken() bypasses bot detection
  • storageState persists auth between tests for speed

Workflow

  1. Identify test framework (Playwright or Cypress)
  2. WebFetch the appropriate URL from decision tree above
  3. Follow official setup instructions
  4. Use pk_test_* and sk_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 storageState for faster tests
  • Use page.waitForSelector('[data-clerk-component]') for Clerk UI

Anti-Patterns

PatternProblemFix
Production keys in testsSecurity riskUse pk_test_* keys
No setupClerkTestingToken()Auth failsCall before navigation
UI-based sign-in every testSlow testsUse 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 tests
  • clerk-nextjs-patterns - Next.js patterns being tested
  • Demo Repo

Skills เพิ่มเติมจาก clerk

clerk-monorepo
clerk
ทำงานอย่างมีประสิทธิภาพใน clerk/javascript SDK monorepo ใช้เมื่อตั้งค่า repo สร้าง / ทดสอบ / รันแพ็กเกจ ตัดสินใจว่า @clerk/* ตัวใด…
official
mosaic
clerk
Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` / `useRecipe` / slots / variants), or building a flow — authoring a state machine…
official
mosaic-machine
clerk
ผู้เขียนและใช้ Mosaic state machines ใช้เมื่อผู้ใช้กำลังเขียน state machine ด้วย createMachine, จำลองโฟลว์หลายขั้นตอน, เชื่อมต่อ machine กับ React…
official
clerk-android
clerk
Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt…
official
clerk-astro-patterns
clerk
รูปแบบ Astro กับ Clerk — middleware, หน้า SSR, คอมโพเนนต์ island, เส้นทาง API, การเรนเดอร์แบบ static เทียบกับ SSR. 触发เมื่อ: astro clerk, clerk astro middleware,…
official
clerk-backend-api
clerk
เครื่องมือสำรวจและดำเนินการ Clerk Backend REST API เรียกดูแท็ก ตรวจสอบสคีมาของเอนด์พอยต์ และดำเนินการคำขอที่ผ่านการรับรองความถูกต้อง ใช้เมื่อแสดงรายการผู้ใช้ จัดการ…
official
clerk-chrome-extension-patterns
clerk
การรับรองความถูกต้องของ Chrome Extension ด้วย @clerk/chrome-extension -- การตั้งค่า popup/sidepanel, syncHost สำหรับ OAuth/SAML ผ่านเว็บแอป, createClerkClient สำหรับ service workers และ…
official
clerk-cli
clerk
Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, impersonation, local webhook testing, deploy verification, instance…
official