Login Flows

Persisting Auth State (storageState)

Avoid logging in before every test by saving and reusing browser state:

// global-setup.ts — runs once before all tests
import { chromium } from '@playwright/test';

async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('/login');
  await page.fill('[name="username"]', 'testuser');
  await page.fill('[name="password"]', 'testpass');
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');

  // Save signed-in state
  await page.context().storageState({ path: './auth.json' });
  await browser.close();
}

export default globalSetup;

Then in playwright.config.ts:

export default defineConfig({
  globalSetup: './global-setup.ts',
  use: {
    storageState: './auth.json',
  },
});

MFA / 2FA Handling

For test environments with TOTP-based 2FA:

import { authenticator } from 'otplib';

async function loginWithMFA(page: Page, secret: string) {
  await login(page, 'user', 'pass');

  // Generate TOTP code
  const code = authenticator.generate(secret);
  await page.fill('[name="totp"]', code);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

Tips

• Always use storageState to avoid repeated logins — it's the single biggest speedup for E2E suites
• Use environment variables for credentials, never hardcode them
• For CI, consider a dedicated test user with stable credentials
• Use page.waitForURL() instead of arbitrary waitForTimeout() after login