Building an Enterprise Playwright Framework from Scratch

playwright-framework/
├── tests/
│   ├── ui/
│   ├── api/
│   └── e2e/
├── pages/
├── fixtures/
├── data/
├── utils/
├── playwright.config.ts
└── .github/workflows/e2e.yml

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  reporter: [['list'], ['html', { open: 'never' }], ['junit', { outputFile: 'reports/junit.xml' }]],
  use: {
    baseURL: process.env.BASE_URL ?? 'https://staging.example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

import { test as base, APIRequestContext } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

type Fixtures = { login: LoginPage; api: APIRequestContext };

export const test = base.extend<Fixtures>({
  login: async ({ page }, use) => use(new LoginPage(page)),
  api: async ({ playwright }, use) => {
    const api = await playwright.request.newContext({ baseURL: process.env.API_URL });
    await use(api);
    await api.dispose();
  },
});
export { expect } from '@playwright/test';

const users = [{ role: 'admin' }, { role: 'editor' }, { role: 'viewer' }];
for (const u of users) {
  test(`${u.role} sees the right menu`, async ({ login, page }) => {
    await login.loginAs(u.role, 'secret');
    await expect(page.getByRole('navigation')).toContainText(u.role);
  });
}

test('checkout @smoke @critical', async () => { /* ... */ });
// Run: npx playwright test --grep @smoke