Playwright Test Automation Framework

A robust, production-ready Playwright test automation framework with comprehensive utilities for reliable browser testing, following Page Object Model (POM) design pattern with OOP principles.

🚀 Features

• Page Object Model: Clean, maintainable test architecture with OOP principles
• Smart Element Finding: Multiple fallback strategies for resilient element location
• Comprehensive Logging: Detailed logs with timestamps and log levels
• Screenshot Capture: Automatic screenshots on failure and at key steps
• Multi-Browser Support: Chrome, Firefox, Safari, and mobile viewports
• Parallel Execution: Run tests in parallel for faster execution
• Error Handling: Graceful error handling with clear error messages
• Test Data Management: Centralized test data and configuration
• HTML Reports: Rich HTML test reports with screenshots and videos
• TypeScript: Full TypeScript support for better code quality
• OOP Design: Encapsulation, Inheritance, Abstraction, and Polymorphism

📁 Project Structure

PlaywrightFramework Using MCP/
├── pages/                          # Page Object Model (POM)
│   ├── BasePage.ts                # Abstract base class
│   ├── LoginPage.ts               # Login page object
│   ├── HomePage.ts                # Home page object
│   └── index.ts                   # Page exports
├── tests/                          # Test files
│   └── ddms-login.spec.ts         # Example login test (POM pattern)
├── utils/                          # Utility classes
│   ├── elementFinder.ts           # Smart element finding
│   ├── logger.ts                  # Comprehensive logging
│   ├── screenshotHelper.ts        # Screenshot management
│   ├── testHelper.ts              # Base test helper
│   ├── testDataManager.ts         # Test data management
│   └── index.ts                   # Utility exports
├── test-data/                      # Test data files
├── logs/                           # Test execution logs
├── test-results/                   # Test results and artifacts
│   ├── html-report/               # HTML test reports
│   ├── screenshots/               # Screenshots
│   └── artifacts/                 # Videos and traces
├── .env                            # Environment variables (not in git)
├── .env.example                    # Example environment variables
├── playwright.config.ts            # Playwright configuration
├── tsconfig.json                   # TypeScript configuration
├── .eslintrc.json                 # ESLint configuration
├── .prettierrc                     # Prettier configuration
├── POM_GUIDE.md                    # Page Object Model guide
├── REFACTORING_SUMMARY.md          # Refactoring details
└── package.json                    # Project dependencies

🛠️ Setup

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Install Playwright browsers:

npx playwright install

4. Configure environment variables:

cp .env.example .env
# Edit .env with your configuration

🧪 Running Tests

Run all tests

npm test

Run tests in headed mode (see browser)

npm run test:headed

Run tests in UI mode (interactive)

npm run test:ui

Run tests in specific browser

npm run test:chrome
npm run test:firefox
npm run test:webkit

Debug tests

npm run test:debug

View test report

npm run test:report

📝 Writing Tests

Page Object Model (Recommended)

The framework follows Page Object Model (POM) pattern for clean, maintainable tests:

import { test, expect } from '@playwright/test';
import { LoginPage, HomePage } from '../pages';
import { TestDataManager } from '../utils';

test.describe('Login Tests', () => {
  let loginPage: LoginPage;
  let homePage: HomePage;

  t

... [View full README on GitHub](https://github.com/NHonrao/PlaywrightWithMCPServer#readme)