🎭 Playwright Automation Framework

A scalable end-to-end UI test automation framework built with Playwright and TypeScript, following the Page Object Model (POM) design pattern with reusable fixtures and GitHub Actions CI/CD integration.

---

🚀 Tech Stack

Tool	Purpose
Playwright	Browser automation & E2E testing
TypeScript	Type-safe scripting
Node.js	Runtime environment
Page Object Model	Test design pattern
Playwright Fixtures	Reusable test setup/teardown
GitHub Actions	CI/CD pipeline

---

📁 Project Structure

Playwright_Demo_Projects/
├── pages/          # Page Object classes (one per page/component)
├── tests/          # Test scripts
├── fixture/        # Custom Playwright fixtures
├── test-data/      # Test data files (JSON/config)
├── utils/          # Reusable helper functions
├── .github/
│   └── workflows/  # GitHub Actions CI/CD pipeline
├── playwright.config.ts
└── package.json

---

✅ Key Features

• Page Object Model (POM) — clean separation between test logic and UI interactions
• Custom Fixtures — reusable setup/teardown for login, test data, and browser context
• API Validation — uses Playwright's request context to validate backend data alongside UI tests
• Data-Driven Testing — parameterized tests using external test data files
• Cross-browser Testing — configured to run on Chromium, Firefox, and WebKit
• GitHub Actions CI — automated test runs on every push/pull request

---

⚙️ Setup & Installation

# Clone the repository
git clone https://github.com/Lekshmi-v6/Playwright_Demo_Projects
cd Playwright_Demo_Projects

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

---

▶️ Running Tests

# Run all tests
npx playwright test

# Run tests in headed mode (see the browser)
npx playwright test --headed

# Run a specific test file
npx playwright test tests/login.spec.ts

# Run tests in a specific browser
npx playwright test --project=chromium

# Generate HTML report
npx playwright show-report

---

🔄 CI/CD Pipeline

Tests run automatically via GitHub Actions on every push to main. The workflow:

1. Checks out the code
2. Installs Node.js and dependencies
3. Installs Playwright browsers
4. Executes the full test suite
5. Uploads the HTML test report as an artifact

---

📊 Sample Test Report

Running 10 tests using 3 workers

  ✓ login › valid credentials (1.2s)
  ✓ login › invalid password shows error (0.8s)
  ✓ dashboard › KPI module loads correctly (2.1s)
  ✓ api › validate response payload (0.5s)
  ...

10 passed (12.4s)

---

🧠 What I Learned Building This

• Structuring a real-world POM framework from scratch
• Writing type-safe Playwright code in TypeScript
• Using fixtures to eliminate test duplication
• Combining UI and API testing in a single framework
• Setting up CI with GitHub Actions

---

👩‍💻 Author

Lekshmi V — QA Automation Engineer
📧 lekshmi.v6@gmail.com
🔗 LinkedIn | GitHub