Playwright Framework Architecture

repo/
  playwright.config.ts
  global-setup.ts
  fixtures/
    index.ts             # merged typed fixtures
    auth.ts              # storageState per role
  pages/                 # POM classes
    LoginPage.ts
    DashboardPage.ts
    components/
      Header.ts
      DataTable.ts
  lib/
    api.ts               # API request helpers
    data.ts              # generators, faker wrappers
    env.ts               # typed env loader
  data/                  # static datasets
    users.json
    products.csv
  tests/
    auth/
    checkout/
    smoke/
  .env.example
  package.json

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  reporter: process.env.CI
    ? [['github'], ['html', { open: 'never' }], ['blob']]
    : [['list'], ['html', { open: 'on-failure' }]],
  use: {
    baseURL: process.env.BASE_URL ?? 'https://staging.acme.co',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'setup', testMatch: /global\.setup\.ts/ },
    { name: 'chromium', use: { ...devices['Desktop Chrome'], storageState: 'state/user.json' }, dependencies: ['setup'] },
    { name: 'mobile',   use: { ...devices['iPhone 14'],       storageState: 'state/user.json' }, dependencies: ['setup'] },
    { name: 'api',      testMatch: /.*\.api\.spec\.ts/ },
  ],
});

import { test as base } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
import { DashboardPage } from '../pages/DashboardPage';
import { Api } from '../lib/api';

type Fx = {
  loginPage: LoginPage;
  dashboardPage: DashboardPage;
  api: Api;
};

export const test = base.extend<Fx>({
  loginPage:     async ({ page },   use) => use(new LoginPage(page)),
  dashboardPage: async ({ page },   use) => use(new DashboardPage(page)),
  api:           async ({ request }, use) => use(new Api(request)),
});
export { expect } from '@playwright/test';

import { test as setup } from '@playwright/test';

setup('authenticate as user', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill(process.env.USER_EMAIL!);
  await page.getByLabel('Password').fill(process.env.USER_PWD!);
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.waitForURL('**/dashboard');
  await page.context().storageState({ path: 'state/user.json' });
});

import { z } from 'zod';
import 'dotenv/config';

const Env = z.object({
  BASE_URL: z.string().url(),
  USER_EMAIL: z.string().email(),
  USER_PWD: z.string().min(6),
  API_TOKEN: z.string().optional(),
});

export const env = Env.parse(process.env);