playwright-template

A reference template for learning Playwright with TypeScript. Includes web and API tests, Page Object Model, test data management, Qase integration, Beacon HTML reporting and CI-ready configuration.

---

Test report

The latest Beacon HTML report from main is published on GitHub Pages and refreshed on every successful push to main:

Direct link: https://estefafdez.com/playwright-template/

CI also uploads the beacon-report/ folder as a workflow artifact on every run (30-day retention). To generate the report locally, run npm test and open it with npx beacon open beacon-report.

---

Requirements

• Node.js 24+
• npm 9+

Installation

npm install
npx playwright install

Create a .env file in the root with the required variables:

REQRES_API_KEY=your_api_key  # only needed when running against https://reqres.in
TESTDINO_TOKEN=your_testdino_token  # optional: TestDino reporting
API_BASE_URL=http://localhost:3000  # optional: run the API tests against the local mock API

---

Commands

Command	Description
npm test	Run all tests
npm run test:web	Web tests only
npm run test:api	API tests only
npm run api:local	Start the local mock API on http://localhost:3000
npm run test:api:local	API tests against the local mock API (no rate limits)
npm run ui	Open the Playwright interactive UI mode
npm run debug	Run in debug mode (step by step)
npm run report	Open the last HTML report

---

Project structure

playwright-template/
├── data/                  # Reusable test data
│   ├── testData.ts        # Data for web tests (forms, etc.)
│   └── users/             # User data for API tests (JSON)
├── elements/              # Locators organised by page area
│   ├── FormElements.ts
│   ├── HomeElements.ts
│   ├── NavigationElements.ts
│   └── TodoElements.ts
├── local-api/             # Local mock API compatible with reqres.in
├── helpers/               # Shared utilities
│   ├── api-helpers.ts     # HTTP client and schema validators
│   └── api-setup.ts       # Delay helper to avoid rate limiting
├── pages/                 # Page Objects (actions per page)
│   ├── ContactPage.ts
│   ├── HomePage.ts
│   ├── NavigationPage.ts
│   └── TodoPage.ts
├── tests/
│   ├── api/               # REST API tests (GET, POST, PUT, PATCH, DELETE)
│   └── web/               # Web UI tests
├── types/                 # Shared TypeScript types
├── playwright.config.ts   # Playwright configuration
└── .env                   # Environment variables (do not commit)

---

Configured projects

Project	Base URL	Tests
web	https://testing.qaautomationlabs.com	tests/web/
api	https://reqres.in (or API_BASE_URL when set)	tests/api/

---

Running the API tests against a local API

The API tests hit reqres.in by default, whose free plan applies rate limits (HTTP 429 once the quota is exhausted). To run them without external limits, this template ships a zero-dependency local mock of that API in local-api/:

npm run test:api:local

The Playwright config starts the mock automatically when API_BASE_URL points to localhost, so no test code changes are needed; the same specs run against either backend.

---

Patterns demonstrated

• Page Object Model (POM): pages encapsulate actions, elements encapsulate locators
• Separated test data: data/ keeps inputs out of test files
• API helpers: reusable HTTP client with schema and response-time validation
• Environment-based config: baseURL is defined in playwright.config.ts, not in code
• Qase integration: tests carry their ID in brackets [N, Suite]
• CI with GitHub Actions: runs on pushes and PRs to main, on a Monday/Wednesday/Friday schedule and on manual dispatch; successful pushes to main publish the Beacon report to GitHub Pages

---

Test plans in Qase

• All Tests