Playwright Automation Template
A reusable Playwright + TypeScript E2E testing template: Page Object Model, shared auth, cross-browser CI, fork it and point it at your own app. Ships with a full 56-test working example against a live demo site.
Overview
A starter template for end-to-end test automation with Playwright and TypeScript, following the Page Object Model. It's built to be forked: click "Use this template" on GitHub and it's yours, but it's not a bare skeleton: it ships with a full, passing 56-test suite against saucedemo.com as a live worked example, so the patterns are something you can read and run before adapting them.
Using It
- Point it at your app: swap the base URL.
- Replace the page objects: everything in
pages/is SauceDemo-specific; swap in classes for your own app's screens, same shape: locators in the constructor, actions as methods. - Replace the fixtures: test data is SauceDemo's;
test-base.ts, the fixture that injects page objects into every spec, is the reusable part. - Rewrite the specs, keeping the folder shape: one folder per feature area, auth first.
- Decide on shared auth: the template logs in once and reuses a saved session across tests; keep that pattern or strip it if your app doesn't need it.
- CI works as-is: the GitHub Actions workflow doesn't reference SauceDemo at all.
What the Example Demonstrates
- Page Object Model: one class per screen, so a selector change is a one-line fix instead of a find-and-replace across every spec.
- Shared authentication via
storageState: the suite logs in once, saves the session, and every feature test starts already authenticated. Login itself is still tested directly, and deliberately doesn't use the saved session. - Fixture-driven test data: accounts and the product catalog are defined once and asserted against, not re-typed into every test.
- A real, reproducible bug, documented as a test, not swept under the rug. One of the demo accounts renders every product with the same broken image; there's a test that pins that down, with a comment on what to change if it's ever fixed upstream.
- Cross-browser CI: every push and pull request runs the full suite on Chromium and Firefox, with the HTML report uploaded as a build artifact.
Why a Template
Most portfolio automation projects are demos, useful to look at, not to use. This one is meant to save someone else the two hours of scaffolding before they can write their first real test: the project structure, the auth pattern, the CI pipeline, and the fixture conventions are already decided and already working.