Playwright UI Testing Framework

A pluggable Playwright setup. Point it at any web app or webpage with one env var — no code changes — then build tests fast with codegen + UI Mode.

Scope: covers web apps, webpages, and mobile web (iPhone/Android device emulation). Native iOS/Android apps are out of scope — those need Appium or Maestro.

Setup (one time)

npm install
npm run install:browsers   # downloads Chromium, Firefox, WebKit

The fast build loop

1. Record a flow against your target — this writes the test code for you:

   BASE_URL=https://your-app.com npm run codegen -- https://your-app.com
   # or emulate an iPhone while recording:
   BASE_URL=https://your-app.com npm run codegen:iphone -- https://your-app.com

2. Paste the generated body into a test(...) in tests/.
3. Iterate in UI Mode — watch mode re-runs as you edit, with time-travel DOM snapshots:

   BASE_URL=https://your-app.com npm run test:ui

   In UI Mode: click the eye icon to watch a test, use Pick Locator to build/validate selectors.

Pointing at different targets

# Deployed site
BASE_URL=https://staging.example.com npm run test:ui

# Local dev server (auto-started for you)
BASE_URL=http://localhost:3000 START_CMD="npm run dev" npm test

Useful commands

Command	What it does
npm run test:ui	Interactive UI Mode (build/debug here)
npm run codegen	Record clicks → generated test code
npm test	Headless run, all projects
npm run test:headed	Watch the browser run
npm run report	Open the last HTML report

Projects (browsers/devices)

Defined in playwright.config.ts: chromium, firefox, webkit, iphone (iPhone 15), android (Pixel 7). Run one with --project:

BASE_URL=https://your-app.com npm test -- --project=iphone