Day 9: Authentication — storageState, Multi-Role, and Session Management

This is Day 9 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Login once, save session, reuse everywhere. storageState eliminates 200 login flows from 200 tests.

Auth Setup Project

// auth.setup.ts
import { test as setup, expect } from '@playwright/test';
const authFile = 'playwright/.auth/user.json';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('admin@example.com');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page.getByText('Dashboard')).toBeVisible();
  await page.context().storageState({ path: authFile });
});

Config Setup

// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { storageState: 'playwright/.auth/user.json' },
      dependencies: ['setup'],
    },
  ],
});

Multi-Role Testing

// admin.setup.ts → playwright/.auth/admin.json
// user.setup.ts → playwright/.auth/user.json

// Config: separate projects per role
projects: [
  { name: 'admin-setup', testMatch: /admin\.setup\.ts/ },
  { name: 'user-setup', testMatch: /user\.setup\.ts/ },
  {
    name: 'admin-tests',
    use: { storageState: 'playwright/.auth/admin.json' },
    dependencies: ['admin-setup'],
    testMatch: /admin\..*\.spec\.ts/,
  },
  {
    name: 'user-tests',
    use: { storageState: 'playwright/.auth/user.json' },
    dependencies: ['user-setup'],
  },
]

Important: Add playwright/.auth/ to .gitignore. Never commit session tokens.

Tomorrow (Day 10): Handling iframes, popups, dialogs, and new tabs.