Featured project 2 · TypeScript · Web + API

Playwright + TypeScript Framework

UI and API test automation for a demo web shop (Angular front end + REST API) with Playwright Test and strict TypeScript: 47 tests, 95 runs per full run on Chromium, Firefox and WebKit.

View source code View documentation View latest CI runs View test report

Purpose

Tests the Practice Software Testing Toolshop, a public demo shop built for testers, through its UI and its REST API, to show modern TypeScript test design: page objects, fixtures, typed API contracts and network control.

Technology stack

Area	Tools
Test runner	Playwright Test 1.64
Language	TypeScript 6, strict mode
API contracts	zod 4 schemas (also the TypeScript types)
Static checks	tsc, ESLint (type-aware, eslint-plugin-playwright), Prettier
CI	GitHub Actions: checks, then api/chromium/firefox/webkit in parallel, then one merged report

Architecture overview

tests/api/*.api.spec.ts   tests/ui/*.spec.ts
        │                         │
  fixtures/test.ts (page objects, API clients, test user, loggedIn option)
        │                         │
  api/ AuthApi · ProductsApi · CartsApi        pages/ + components/HeaderComponent
  + zod schemas                                + @step decorator
        │                         │
     REST API                 Browser (3 engines)

Key engineering decisions

Fixtures instead of new: tests declare what they need; API tests never start a browser
Login through the API per test (token injected before page load); a saved login was not used because the shop's tokens expire after 5 minutes
zod schemas validate every response and provide the types, so contract and code cannot drift; they found a real inconsistency between two endpoints
@step decorator on page-object methods for readable reports and traces; passwords never in step titles
Each worker registers its own customer, so no shared credentials and no collisions in parallel runs

Implemented features

Login, catalogue search/filter/sort, product, full checkout of two products, guest sign-in step
Network tests: mocked product list, empty list, 500 error, inspection of requests the front end sends
API tests: registration, JWT login, paging contract, carts with 422 validation and a business rule, 404s
Exact money maths in cents; tags for smoke, negative, e2e, hybrid and network runs

Setup and execution

npm ci
npx playwright install --with-deps
npm test                 # API + 3 browsers
npm run test:api         # API only
npm run check            # typecheck + lint + format (what CI runs first)

Sample test results

Playwright HTML report overview — Merged Playwright HTML report of a full run.

CI workflow

One workflow: static checks first, then four parallel jobs (API, Chromium, Firefox, WebKit), then a single merged HTML report kept as an artifact.

Known limitations and future improvements

Limitations

The suite depends on a public demo site; its availability and data affect runs
Two form-login UI tests are skipped in CI, where the site's bot check blocks automated form logins; login itself is covered through the API

Next steps

Publish the merged HTML report to GitHub Pages
Visual comparison of key pages