Pillar 03 · Automation Code Lab

A production-grade Playwright TypeScript blueprint

Browse the same tree you would inherit on day one of a senior QA role: clean tests, page objects, fixtures, mocks, data builders, parallel config, and CI workflow.

Page Object Model

Every UI surface owns a typed object so specs read like product requirements, not selector spaghetti.

Custom fixtures

Authed contexts, deterministic mocks, and data builders compose into one reusable test fixture.

Network sandbox

page.route + counter-based mocks deliver retry, 500, and slow-backend scenarios with no real backend.

Tags & sharding

@smoke and @regression run independently across 4 shards in CI — green in under 6 minutes.

tests/login.spec.ts

Auth happy path + invalid credential negative cases.

tests/login.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { test, expect } from '@playwright/setup/fixtures';
import { LoginPage } from '@pages/login.page';

test.describe('Authentication @smoke', () => {
  test('demo credentials reach the dashboard', async ({ page }) => {
    const login = new LoginPage(page);
    await login.goto();
    await login.useDemoAccount();
    await login.submit();
    await expect(page).toHaveURL(/\/dashboard$/);
  });

  test('invalid credentials show stable error @regression', async ({
    page,
  }) => {
    const login = new LoginPage(page);
    await login.goto();
    await login.signIn('demo@hakdogan.com', 'Wrong-password-1!');
    await expect(login.errorAlert).toContainText(/invalid credentials/i);
  });
});

How it composes

  • tests/ → describe-blocks tagged @smoke / @regression.
  • pages/ → Page Object Model for every screen with role-based locators.
  • components/ → reusable component objects (header, toast, modal).
  • fixtures/ → custom Playwright fixtures with three preset auth states.
  • utils/ → cross-cutting helpers: auth, mocks, waits, retries, downloads.
  • data/ → pure data builders (faker-powered) — no I/O, no shared state.
  • playwright.config.ts → projects, retries, traces, screenshots, video, GREP.
  • .github/ → 4-shard matrix, nightly cron, artifact upload on failure.