Playwright · API reference · all subjects

credentials

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Credentials class overview

Credentials is a virtual WebAuthn authenticator scoped to a BrowserContext, available since v1.61. It lets tests register passkeys and answer navigator.credentials.create() and navigator.credentials.get() ceremonies in the page without a real authenticator or hardware security key.

Credentials usage patterns

There are three common ways to use Credentials: (1) Seed a known credential by importing it with Credentials.create so the app can sign in immediately; (2) Capture a credential with Credentials.get, then reuse it by seeding it into later tests; (3) Save credentials in the storage state via BrowserContext.storageState.credentials and restore later.

Credentials default authenticator attachment

The virtual WebAuthn authenticator presents itself as a platform authenticator (authenticatorAttachment is 'platform'), and PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() resolves to true in the page.

Credentials default credential discoverability

Seeded credentials are discoverable (resident), so both username-then-passkey and usernameless passkey flows resolve them.

Credentials default key generation

Fresh keys generated by Credentials.create are ECDSA P-256 (COSE algorithm -7). An omitted id or userHandle is filled with 16 random bytes.

Credentials seed known credential example JavaScript

Example in JavaScript showing how to seed a known credential: ```js const context = await browser.newContext(); // A passkey your backend already provisioned for a test user. await context.credentials.create('example.com', { id: knownCredentialId, // base64url userHandle: knownUserHandle, // base64url privateKey: knownPrivateKey, // base64url PKCS#8 (DER) publicKey: knownPublicKey, // base64url SPKI (DER) }); await context.credentials.install(); const page = await context.newPage(); await page.goto('https://example.com/login'); // The page's navigator.credentials.get() is answered with the seeded passkey. ```

Credentials capture and reuse example JavaScript

Example in JavaScript showing how to capture a credential and reuse it: ```js // setup test: let the app register a passkey, then save the storage state with it. const context = await browser.newContext(); await context.credentials.install(); const page = await context.newPage(); await page.goto('https://example.com/register'); await page.getByRole('button', { name: 'Create a passkey' }).click(); // Read back the passkey the page registered — it includes the private key. const [credential] = await context.credentials.get({ rpId: 'example.com' }); fs.writeFileSync('playwright/.auth/passkey.json', JSON.stringify(credential)); ```

Credentials reuse captured passkey example JavaScript

Example in JavaScript showing how to seed a previously captured passkey: ```js // later test: seed the captured passkey so the app starts already enrolled. const credential = JSON.parse(fs.readFileSync('playwright/.auth/passkey.json', 'utf8')); const context = await browser.newContext(); await context.credentials.create(credential.rpId, credential); await context.credentials.install(); const page = await context.newPage(); await page.goto('https://example.com/login'); // navigator.credentials.get() resolves the captured passkey — already signed in. ```

Give your agent this brain