Playwright Ts Automation

A scalable, production-grade end-to-end test automation framework built with Playwright and TypeScript, featuring Page Object Model, Custom Fixtures, API Testing, Allure Reporting, CI/CD via GitHub Actions, and AI-assisted testing via MCP (Model Context Protocol) and GitHub Copilot agents.

---

📌 About

This framework is built to reflect real-world SDET practices with a clean, scalable architecture. It covers UI E2E testing, API testing, cross-browser and mobile-viewport execution, and AI-assisted test generation/healing — all wired into a CI/CD pipeline that runs on every push.

---

🚀 Tech Stack

Tool	Purpose
Playwright ^1.61.1	Browser automation & E2E test runner
TypeScript	Type-safe test scripting
Node.js	Runtime environment (ESM project)
Allure Reporter ^3.10.2	Rich HTML test reporting
GitHub Actions	CI/CD pipeline
MCP (Model Context Protocol)	AI-assisted browser & test-runner tooling
GitHub Copilot Agents	Custom agents for test planning, generation & self-healing

---

📁 Project Structure

├── .github
│   ├── agents
│   │   ├── playwright-test-generator.agent.md
│   │   ├── playwright-test-healer.agent.md
│   │   └── playwright-test-planner.agent.md
│   └── workflows
│       ├── copilot-setup-steps.yml
│       └── playwright.yml
├── .vscode
│   └── mcp.json
├── generate-tree.cjs
├── package.json
├── playwright.config.ts
├── README.md
├── specs
│   └── README.md
├── src
│   ├── data
│   │   ├── appointment.data.ts
│   │   └── inventory.data.ts
│   ├── fixtures
│   │   └── fixtures.ts
│   ├── helpers
│   │   └── file-helpers.ts
│   └── pages
│       ├── cura
│       │   ├── AppointmentPage.ts
│       │   └── CuraLoginPage.ts
│       └── sauceDemo
│           ├── CartPage.ts
│           ├── CheckoutPage.ts
│           ├── InventoryPage.ts
│           └── SauceLoginPage.ts
├── tests
│   ├── api
│   │   └── users.api.spec.ts
│   ├── cura-login-validation-plan.md
│   ├── seed.spec.ts
│   └── ui
│       ├── cura
│       │   ├── appointment.spec.ts
│       │   └── cura-login-validation.spec.ts
│       └── sauceDemo
│           └── inventory.spec.ts
└── tsconfig.json

Page objects are grouped per application (sauceDemo/, cura/) rather than a single shared folder — each app owns its own login page and flows, which keeps the framework scalable as more apps are added.

---

⚙️ Prerequisites

• Node.js v18 or above
• npm v9 or above

---

🛠️ Setup & Installation

1. Clone the repository

git clone https://github.com/Anmol-Tiwary/playwright-ts-automation.git
cd playwright-ts-automation

2. Install dependencies

npm install

3. Install Playwright browsers

npx playwright install

dotenv is wired into playwright.config.ts for future environment-based configuration (e.g. credentials, base URLs) — create a .env file at the project root if/when your tests need one.

---

▶️ Running Tests

# Run all tests
npm test

# Run specific test suite
npm run test:ui
npm run test:inventory
npm run test:appointment
npm run test:api

# Run in headed mode (watch browser)
npx playwright test --headed

# Run only smoke tests
npx playwright test --grep @smoke

# Run only regression tests
npx playwright test --grep @regression

# Run on specific browser
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit
npx playwright test --project="Mobile Chrome"

# Debug mode
npx playwright test --debug

# UI mode (interactive)
npx playwright test --ui

# Regenerate the project tree in this README
npm run tree

Note: playwright.config.ts currently has headless: false set globally, so local runs open a visible browser by default — pass --headed=false or flip the config flag if you want headless runs locally (and to keep local behavior consistent with CI).

---

📊 Test Reports

# View Playwright HTML report
npx playwright show-report

# Generate and view Allure report
npx allure generate allure-results --clean
npx allure open

Reporters configured: list, Playwright HTML, Allure, and JUnit XML (written to test-results/allure-results.xml).

---

🧪 Test Coverage

Suite	Application	Type	Tags
Inventory → Checkout	SauceDemo	UI E2E	@smoke (price validation), @regression (cart → checkout → order confirmation)
CURA Login Validation	CURA Healthcare	UI E2E	Positive login + 3 negative-path cases (invalid creds, empty username, empty password)
CURA Appointment Booking	CURA Healthcare	UI E2E	End-to-end appointment booking flow
Users API	Reqres	API	Fetch users list

Browsers/devices covered: Chromium, Firefox, WebKit, Mobile Chrome (iPhone 17 Pro viewport).

---

🏗️ Framework Architecture

Page Object Model (POM)

UI interactions are encapsulated in page classes under src/pages/, organized by application: src/pages/sauceDemo/ and src/pages/cura/. Each app owns its own login page, so adding a new app never touches an existing one's page objects.

Custom Fixtures

src/fixtures/fixtures.ts extends Playwright's base test with all page objects. Tests destructure the pages they need — no manual new PageClass(page) instantiation required.

// Every test gets pages injected automatically
test('example', async ({ loginPage, inventoryPage }) => {
    await loginPage.loginToSauceDemo(username, password);
    await inventoryPage.assertProductCount(6);
});

Available fixtures: sauceLoginPage / loginPage (alias), curaLoginPage, inventoryPage, cartPage, checkoutPage, appointmentPage.

Typed Test Data

Test data lives in src/data/ (appointment.data.ts, inventory.data.ts) as typed TypeScript constants — no hardcoded values inside spec files.

Scalability — Adding a New Feature

1. Create src/pages/newapp/NewPage.ts
2. Register it in src/fixtures/fixtures.ts
3. Add data in src/data/newapp.data.ts
4. Write tests in tests/ui/newapp/newapp.spec.ts

Nothing else changes. ✅

---

🔄 CI/CD

GitHub Actions pipeline (.github/workflows/playwright.yml) triggers on every push and pull request to main/master:

• ✅ Checks out code and sets up Node.js (lts/*)
• ✅ Installs dependencies via npm ci
• ✅ Installs Playwright browsers (--with-deps)
• ✅ Runs the full test suite
• ✅ Uploads the HTML report as a build artifact (30-day retention)

A second workflow, copilot-setup-steps.yml, provisions the environment (Node + Playwright browsers) that GitHub Copilot's coding agent uses when it works in this repo.

---

🤖 AI Capabilities (MCP + Copilot Agents)

This framework integrates AI-assisted testing at two levels:

MCP servers (.vscode/mcp.json) expose Playwright to AI tools/IDEs:

• playwright — general browser automation MCP server
• playwright-test — Playwright's own test-runner MCP server

Custom GitHub Copilot agents (.github/agents/) built for a plan → generate → heal workflow:

• playwright-test-planner — turns requirements into structured test plans
• playwright-test-generator — writes Playwright spec files from a test plan/seed file using live browser tools (navigate, click, snapshot, verify, etc.)
• playwright-test-healer — investigates and repairs failing/flaky tests

---

🌟 Key Features

• ✅ App-scoped POM Architecture — page classes grouped per application, zero duplication
• ✅ Custom Fixtures — automatic page injection via base.extend<Fixtures>()
• ✅ Typed Test Data — all data in typed TypeScript constants
• ✅ UI + API Testing — full coverage in one framework
• ✅ Cross-browser + Mobile — Chromium, Firefox, WebKit, Mobile Chrome
• ✅ Allure + HTML + JUnit Reporting — rich visual and CI-friendly reports
• ✅ GitHub Actions CI/CD — automated on every push/PR
• ✅ MCP + Copilot Agents — plan/generate/heal AI-assisted workflow
• ✅ Screenshot on failure — auto-captured for debugging
• ✅ Trace on first retry — full trace for CI failures

---

👤 Author

Anmol Tiwary

• 🔗 LinkedIn
• 🐙 GitHub
• 💼 SDET | 4+ Years | Playwright · Selenium · TypeScript · Java · AI-Assisted Testing | Immediate Joiner