feat(testing): Add Playwright page objects utilities

[dstaley]

Description

This PR adds Playwright page objects for Clerk functionality, which was directly extraced from our e2e test suite.. While the API is being refined for public consumption, it will be available under the @clerk/testing/playwright/unstable import, and is not subject to SemVer compatibility guidelines.

Also, this PR switches our e2e test suite to use the @clerk/testing/ package for these page objects (so we're not duplicating functionality).

import { test } from "@playwright/test";
import { createPageObjects } from "@clerk/testing/playwright/unstable";

test("can sign up with email and password", async (context) => {
  const po = createPageObjects(context);

  // Go to sign up page
  await po.signUp.goTo();

  // Fill in sign up form
  await po.signUp.signUpWithEmailAndPassword({
    email: '[email protected]',
    password: Math.random().toString(36),
  });

  // Verify email
  await po.signUp.enterTestOtpCode();

  // Check if user is signed in
  await po.expect.toBeSignedIn();
});

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 31daafe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/testing	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 21, 2025 5:08pm

[dstaley]

!snapshot

[clerk-cookie]

Hey @dstaley - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.24-snapshot.v20250417194508
@clerk/astro	2.6.6-snapshot.v20250417194508
@clerk/backend	1.29.1-snapshot.v20250417194508
@clerk/chrome-extension	2.2.31-snapshot.v20250417194508
@clerk/clerk-js	5.61.2-snapshot.v20250417194508
@clerk/elements	0.23.16-snapshot.v20250417194508
@clerk/clerk-expo	2.9.14-snapshot.v20250417194508
@clerk/expo-passkeys	0.2.8-snapshot.v20250417194508
@clerk/express	1.4.7-snapshot.v20250417194508
@clerk/fastify	2.2.7-snapshot.v20250417194508
@clerk/localizations	3.13.12-snapshot.v20250417194508
@clerk/nextjs	6.16.0-snapshot.v20250417194508
@clerk/nuxt	1.5.7-snapshot.v20250417194508
@clerk/clerk-react	5.28.2-snapshot.v20250417194508
@clerk/react-router	1.2.7-snapshot.v20250417194508
@clerk/remix	4.5.19-snapshot.v20250417194508
@clerk/shared	3.7.2-snapshot.v20250417194508
@clerk/tanstack-react-start	0.13.7-snapshot.v20250417194508
@clerk/testing	1.5.0-snapshot.v20250417194508
@clerk/themes	2.2.34-snapshot.v20250417194508
@clerk/types	4.54.2-snapshot.v20250417194508
@clerk/vue	1.6.3-snapshot.v20250417194508

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact