VALIDATION LAB•CODE LAB

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, utils (auth + 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.

Shared auth helpers

signInAs and admin promotion via storage keep specs explicit while still avoiding duplicated login flows.

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 + client-side validation 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
22
23
24
25
import { test, expect } from 'playwright/test';
import { LoginPage } from '../pages/login.page';

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


  test('invalid email and short password show validation messages @regression', async ({
    page,
  }) => {
    const login = new LoginPage(page);
    await login.goto();
    await login.signIn('not-an-email', 'short');
    await expect(login.emailFormatError).toHaveText(/Use a valid email address/i);
    await expect(login.passwordLengthError).toHaveText(
      /Password must be at least 8/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).
  • utils/auth.ts → shared signInAs for user and admin journeys (storage promotion included).
  • utils/ → cross-cutting helpers: auth, mocks, waits, retries, downloads.
  • data/ → pure data builders (faker-powered) — no I/O, no shared state.
  • tsconfig.json → strict TypeScript, noEmit check-only for the suite.
  • playwright.config.ts → projects, retries, traces, screenshots, video, GREP.
  • .github/ → 4-shard matrix, nightly cron, artifact upload on failure.

Run locally

Setup

  • unzip/ → extract lab.hakdogan.com.zip.
  • cd/ → enter lab.hakdogan.com/.
  • install/ → run npm install.
  • browsers/ → run npx playwright install.
  • test/ → run npx playwright test.

Usage

  • report/ → npx playwright show-report.
  • smoke/ → npx playwright test --grep @smoke.
  • regression/ → npx playwright test --grep @regression.
  • debug/ → npx playwright test --debug.
  • node/ → Node.js v18+ (v20 recommended).