Playwright Pro

Playwright Pro ships with 55 test templates — the auth/mfa.md template covers exactly this.

Template: assets/auth/mfa.md maps to a TOTP + password flow:

test.describe('MFA Login', () => {
  test('should prompt for TOTP after valid credentials', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill(process.env.TEST_PASSWORD!);
    await page.getByRole('button', { name: 'Sign in' }).click();

    // Step 2: TOTP prompt
    await expect(page.getByRole('heading', { name: /verification/i })).toBeVisible();
    await page.getByLabel('Authentication code').fill(getTOTPCode(process.env.TEST_TOTP_SECRET!));
    await page.getByRole('button', { name: 'Verify' }).click();

    await expect(page).toHaveURL('/dashboard');
  });

  test('should reject invalid TOTP code', async ({ page }) => {
    // navigate to TOTP step, enter '000000'
    await expect(page.getByRole('alert')).toHaveText(/invalid.*code/i);
  });
});

Key detail: getTOTPCode() uses otplib to generate a live code from your test secret — no hard-coding 6-digit values. Store TEST_TOTP_SECRET in .env.local, never in git.

Also includes: lockout after 3 failures, recovery code flow, and remember-this-device tests. Want me to generate the full file for your app?

Here's the full template index across 11 categories (55 templates total):

Each template is a .md file with a complete test structure, locator strategy, and edge cases. They adapt to your app's actual selectors — no copy-paste with broken CSS.

What's the first flow you want to cover? I'll pull the matching template and tailor it to your codebase.