ae elsabban.dev
← All projects
Test automation Working

Playwright Framework Showcase

A reference Playwright framework in TypeScript with page objects, parallel runs, traces, and CI, run against public practice sites.

Context
Personal project
My role
Design and build
Code
Public repo (link coming)
  • TypeScript
  • Playwright
  • Page Object Model
  • GitHub Actions

Pipeline

  1. 01 Specs Readable, data-driven tests
  2. 02 Page objects One place per screen
  3. 03 Parallel run Browsers and shards
  4. 04 Artifacts HTML report, traces, video

What it is

The same structure I’ve used to build frameworks at FINRA and Duke Energy, rebuilt in the open against public practice sites: the-internet, UI Testing Playground, and Sauce Demo. Those sites are designed to break naive tests with dynamic IDs, delayed elements, shadow DOM, and flaky loading, which makes them good material.

Design choices

  • Page Object Model so a UI change is fixed in one file.
  • Selector strategy built on roles and test IDs, with CSS as a last resort.
  • Web-first assertions and no fixed sleeps.
  • Parallel runs across Chromium, Firefox, and WebKit.
  • Traces, screenshots, and video kept on failure for fast debugging.
  • GitHub Actions runs the suite on every push and publishes the HTML report.

Why it matters for AI work

The failures this suite produces are the input for the MCP Playwright Triage Server. Good test artifacts make AI triage possible.