Authentication Management and Storage State

+-----------------------------------------------------------------------------+
|               Traditional Anti-Pattern: Repetitive UI Logins                |
|                                                                             |
|  Test 1: [UI Login: 3s] -> [Test Logic: 1s] = 4s                            |
|  Test 2: [UI Login: 3s] -> [Test Logic: 0.5s] = 3.5s                        |
|  Test 3: [UI Login: 3s] -> [Test Logic: 2s] = 5s                            |
|  TOTAL for 100 tests: ~300 seconds (5 minutes) wasted typing passwords!     |
+-----------------------------------------------------------------------------+

+-----------------------------------------------------------------------------+
|               Playwright 2026: Storage State Reuse Architecture             |
|                                                                             |
|  Setup Project (Runs Once): [API/UI Login: 1.5s] -> Persist to storageState |
|                                                      │                      |
|                       ┌──────────────────────────────┴────────────────┐     |
|                       ▼                                               ▼     |
|  Worker 1 (Context with storageState)        Worker 2 (Context with storageState)
|  Test 1: [Test Logic: 1s]                    Test 2: [Test Logic: 0.5s]     |
|  Test 3: [Test Logic: 2s]                    Test 4: [Test Logic: 1.2s]     |
|  TOTAL for 100 tests: ~35 seconds cumulative execution duration             |
+-----------------------------------------------------------------------------+

+-----------------------------------------------------------------------------+
|                          1. SETUP PROJECT (setup)                           |
|                                                                             |
|   auth.setup.ts  ──► POST /api/auth/login ──► Obtain JWT + Set-Cookie       |
|                            │                                                |
|                            ▼                                                |
|   page.context().storageState({ path: '.auth/admin.json' })                 |
|   page.context().storageState({ path: '.auth/user.json' })                  |
+-----------------------------------------------------------------------------+
                                     │
                                     ▼ (Save JSON snapshots to disk)
+-----------------------------------------------------------------------------+
|                      .auth/ Directory (Git-ignored)                         |
|   - admin.json (Cookies + LocalStorage with Administrator role)             |
|   - user.json  (Cookies + LocalStorage with Standard Customer role)         |
+-----------------------------------------------------------------------------+
                                     │
            ┌────────────────────────┴────────────────────────┐
            ▼                                                 ▼
+------------------------------------+   +------------------------------------+
|  Project: "admin-tests"            |   |  Project: "customer-tests"         |
|  use: {                            |   |  use: {                            |
|    storageState: '.auth/admin.json'|   |    storageState: '.auth/user.json' |
|  }                                 |   |  }                                 |
|                                    |   |                                    |
|  Worker A: dashboard.spec.ts       |   |  Worker C: profile.spec.ts         |
|  Worker B: settings.spec.ts        |   |  Worker D: orders.spec.ts          |
+------------------------------------+   +------------------------------------+

{
  "cookies": [
    {
      "name": "session_token",
      "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
      "domain": "localhost",
      "path": "/",
      "expires": 1789038400,
      "httpOnly": true,
      "secure": false,
      "sameSite": "Lax"
    }
  ],
  "origins": [
    {
      "origin": "http://localhost:3000",
      "localStorage": [
        {
          "name": "user_meta",
          "value": "{\"id\":\"usr_01\",\"role\":\"admin\",\"theme\":\"dark\"}"
        }
      ]
    }
  ]
}

import { defineConfig, devices } from '@playwright/test';
import path from 'path';

/** Absolute paths to serialized role states */
export const ADMIN_AUTH_FILE = path.join(__dirname, '.auth/admin.json');
export const USER_AUTH_FILE = path.join(__dirname, '.auth/user.json');

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? '100%' : undefined,

  projects: [
    // 1. Setup project: executes first to generate session states
    {
      name: 'setup',
      testMatch: /.*\.setup\.ts/,
    },

    // 2. Administrator test suite
    {
      name: 'admin-chromium',
      testMatch: /.*admin.*\.spec\.ts/,
      use: {
        ...devices['Desktop Chrome'],
        storageState: ADMIN_AUTH_FILE,
      },
      dependencies: ['setup'], // Strict prerequisite dependency
    },

    // 3. Standard user test suite
    {
      name: 'user-chromium',
      testMatch: /.*user.*\.spec\.ts/,
      use: {
        ...devices['Desktop Chrome'],
        storageState: USER_AUTH_FILE,
      },
      dependencies: ['setup'],
    },

    // 4. Public unauthenticated tests
    {
      name: 'public-chromium',
      testMatch: /.*public.*\.spec\.ts/,
      use: {
        ...devices['Desktop Chrome'],
        // storageState omitted: fresh incognito context
      },
    },
  ],
});

import { test as setup, expect } from '@playwright/test';
import { ADMIN_AUTH_FILE, USER_AUTH_FILE } from '../playwright.config';

setup.describe('Global Session State Initialization', () => {
  setup('authenticates administrator via API and persists state', async ({ request, page }) => {
    // 1. Dispatch fast direct HTTP POST to authentication endpoint (skipping browser rendering)
    const loginResponse = await request.post('/api/auth/login', {
      data: {
        email: process.env.E2E_ADMIN_EMAIL ?? '[email protected]',
        password: process.env.E2E_ADMIN_PASSWORD ?? 'SecureEnterprisePassword2026!',
      },
    });

    expect(loginResponse.ok()).toBeTruthy();
    const { token, user } = (await loginResponse.json()) as { token: string; user: { id: string; role: string } };

    // 2. Navigate to base domain to initialize localStorage under correct origin
    await page.goto('/favicon.ico');

    // 3. Inject tokens into localStorage
    await page.evaluate(
      ({ authToken, userData }) => {
        localStorage.setItem('auth_token', authToken);
        localStorage.setItem('user_profile', JSON.stringify(userData));
      },
      { authToken: token, userData: user }
    );

    // 4. Save consolidated state (cookies from response + localStorage) to disk
    await page.context().storageState({ path: ADMIN_AUTH_FILE });
  });

  setup('authenticates standard user via UI form (fallback scenario)', async ({ page }) => {
    // Fallback UI flow for providers requiring complex CSRF tokens or redirects
    await page.goto('/login');
    await page.getByLabel('Email').fill(process.env.E2E_USER_EMAIL ?? '[email protected]');
    await page.getByLabel('Password').fill(process.env.E2E_USER_PASSWORD ?? 'StandardPassword2026!');
    await page.getByRole('button', { name: 'Sign In' }).click();

    // Await navigation to protected dashboard
    await page.waitForURL('**/dashboard');
    await expect(page.getByRole('heading', { name: 'My Courses' })).toBeVisible();

    // Persist session state
    await page.context().storageState({ path: USER_AUTH_FILE });
  });
});

import { test, expect } from '@playwright/test';

test.describe('Admin Control Panel', () => {
  test('administrator can configure worker token allocations', async ({ page }) => {
    // Session is pre-authenticated; navigate directly to protected route
    await page.goto('/admin/security/token-limits');

    // Assert presence of privileged interface controls
    await expect(page.getByRole('heading', { name: 'Security Settings' })).toBeVisible();

    const limitInput = page.getByLabel('Max tokens per worker');
    await limitInput.fill('64');
    await page.getByRole('button', { name: 'Save Changes' }).click();

    await expect(page.getByRole('status')).toHaveText('Settings successfully updated');
  });
});

import { test as base, type Page } from '@playwright/test';
import { ADMIN_AUTH_FILE, USER_AUTH_FILE } from '../../playwright.config';

export interface RoleFixtures {
  adminPage: Page;
  userPage: Page;
}

export const test = base.extend<RoleFixtures>({
  adminPage: async ({ browser }, use) => {
    const context = await browser.newContext({ storageState: ADMIN_AUTH_FILE });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },

  userPage: async ({ browser }, use) => {
    const context = await browser.newContext({ storageState: USER_AUTH_FILE });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
});

export { expect } from '@playwright/test';