Learn Playwright

Overview

This repository is a practical Playwright + TypeScript learning project built around demoqa.com.

It is used to explore:

Page Object Model (POM)
data-driven testing
environment-based execution
GitHub Actions CI
GitHub Pages publishing for reports and docs

Highlights

12 Playwright spec files covering key DemoQA flows
one @sanity example test in each spec file
pageObjects/ as the active Page Object Model directory
shared helpers in utils/
reusable navigation metadata in data/navigationSections.ts
generated local docs via AsciiDoc
GitHub Actions workflow that runs sanity first, then full regression if sanity passes, stores report history, and publishes docs

Local Usage

Install dependencies:

corepack enable
corepack prepare pnpm@10.9.0 --activate
corepack pnpm install
corepack pnpm exec playwright install

Run tests in dev:

corepack pnpm run test:dev

Run tests in e2e:

corepack pnpm run test:e2e

Open Playwright UI mode for dev:

corepack pnpm run test:ui:dev

Run one spec in dev:

corepack pnpm run test:spec:dev -- tests/example.spec.ts

Open Playwright UI mode for one spec in dev:

corepack pnpm run test:ui:spec:dev -- tests/example.spec.ts

Build local docs:

corepack pnpm run docs:build

Preview local docs:

corepack pnpm run docs:preview

Show the Playwright HTML report:

corepack pnpm run show-report

Test Coverage

Area Spec File Notes

Area	Spec File	Notes
Login	`login.spec.ts`	Positive and negative login scenarios with data-driven coverage
Registration	`register.spec.ts`	Registration flow coverage
Text Box	`textBox.spec.ts`	Form field interaction and validation checks
Check Box	`checkBox.spec.ts`	Current DemoQA tree structure and result-message validation
Radio Button	`radioButton.spec.ts`	Selection-state validation
Buttons	`buttons.spec.ts`	Click, double-click, and right-click behavior
Links	`links.spec.ts`	Link behavior checks
Alerts	`alerts.spec.ts`	Dialog and alert coverage
Web Tables	`webTables.spec.ts`	CRUD-style table workflows and search coverage
Broken Links / Images	`brokenLinksImages.spec.ts`	Valid and broken state checks aligned to current site behavior
Navigation	`navigation.spec.ts`	Sidebar and direct-link navigation patterns
Book Store	`bookstore.spec.ts`	Book Store and related user flow coverage

Login

login.spec.ts

Positive and negative login scenarios with data-driven coverage

Registration

register.spec.ts

Registration flow coverage

Text Box

textBox.spec.ts

Form field interaction and validation checks

Check Box

checkBox.spec.ts

Current DemoQA tree structure and result-message validation

Radio Button

radioButton.spec.ts

Selection-state validation

Buttons

buttons.spec.ts

Click, double-click, and right-click behavior

Links

links.spec.ts

Link behavior checks

Alerts

alerts.spec.ts

Dialog and alert coverage

Web Tables

webTables.spec.ts

CRUD-style table workflows and search coverage

Broken Links / Images

brokenLinksImages.spec.ts

Valid and broken state checks aligned to current site behavior

Navigation

navigation.spec.ts

Sidebar and direct-link navigation patterns

Book Store

bookstore.spec.ts

Book Store and related user flow coverage

Documentation Map

CI-generated reports and published docs are available at GitHub Pages.

Notes

This project is intentionally educational. The goal is not only to run tests, but also to keep the repo understandable, reusable, and easy to evolve over time.

The CI workflow uses @sanity as an example tag for a small gate stage before the full suite. It demonstrates test tagging and staged execution.