Skip to main content
Angular 21+ · Playwright

Playwright tests that assert on real state, not vibes.

Claude Code skills for Angular Playwright testing, done right.

Four Claude Code skills that turn “write a data-testid, cross your fingers, add a waitForTimeout” into a disciplined, typed, repeatable workflow — so your Angular E2E suite stops racing the UI and starts reading its actual state.

Get StartedBrowse the Skills Catalog
Why this exists

You've written this Playwright suite before

Every Angular team reinvents the same brittle E2E patterns from scratch — and every team pays for it in flaky CI runs. ng-starters replaces that improvisation with four skills that instrument, catalog, wait on, and drive your app the same disciplined way, every time.

The way most suites get built

  • await page.waitForTimeout(500) stacked before every assertion, because nothing in the app signals real readiness — flaky under load, slow always.
  • data-testid="submit-btn" retyped by hand in every component and every spec, one typo away from a silent miss.
  • Ad-hoc polling loops hand-rolled per spec for every modal, drawer, and debounced search box, because there's no shared wait helper to reach for.
  • Page objects that are really just locator grab-bags — no selector priority, no readiness discipline, business flow logic tangled straight into the class.

What ng-starters wires in instead

  • ng-playwright-testid-attributes — data-*/aria-* attributes bound to the exact signal driving the render, so waits assert on real state transitions instead of racing a timer.
  • ng-playwright-testid-catalog — one typed, collision-checked data-testid registry per feature area, mirrored into the Playwright side, so app and spec code can never drift on an id string.
  • ng-playwright-attribute-waits — one canonical set of helpers for readiness, close/unmount, epoch-fencing, and search-settle waits, instead of a hand-rolled polling loop per spec.
  • ng-playwright-page-objects — a shared BasePage contract, role-first selector priority ladder, and readiness-wait discipline baked into every Page Object class.
Quick install

Two minutes to a disciplined test suite

Install straight from this repo with the Vercel Skills CLI — pick just the skill(s) you need, globally or per-project.

skills add git@github.com:catesandrew/ng-starters.git --skill skills/ng-playwright-testid-attributes -g
skills add git@github.com:catesandrew/ng-starters.git --skill skills/ng-playwright-testid-catalog -g
skills add git@github.com:catesandrew/ng-starters.git --skill skills/ng-playwright-page-objects -g
skills add git@github.com:catesandrew/ng-starters.git --skill skills/ng-playwright-attribute-waits -g

Prefer npm packages, the Claude Code plugin marketplace, or a plain git clone? All four channels are covered in Getting Started.

Stop shipping flaky Angular E2E tests

Instrument components, catalog testids, wait on real attributes, and drive pages through disciplined Page Objects — the whole workflow, wired together.

Get Started