🎭 Playwright Test Automation Framework

> 🚀 A powerful, data-driven test automation framework built with Playwright and TypeScript, leveraging @executeautomation/playwright-mcp-server for enhanced test recording and playback capabilities. Features Page Object Model design pattern for scalable and maintainable automated testing.

✨ Highlights

- 🏗️ Page Object Model - Clean and maintainable test architecture
- 📊 Data-Driven Testing - Easily scale tests with external test data
- 🔧 TypeScript Support - Robust type checking and better IDE integration
- ♻️ Reusable Components - Modular design for maximum code reuse
- 🎯 Easy Maintenance - Centralized locators and data management
- 📈 Scalable Design - Effortlessly add new test scenarios
- 🎥 MCP Server Integration - Enhanced test recording and playback functionality

🌟 Key Features

- Structured and organized test architecture
- Separation of test data from test logic
- Powerful helper methods for common operations
- Easy-to-follow page object pattern implementation
- Comprehensive test data management
- Ready-to-use registration flow example
- Test recording and playback using MCP Server
- Automated test script generation

Framework Structure

tests/
├── data/                    # Test Data Layer
│   ├── interfaces/         
│   │   └── TestData.ts     # Data type definitions
│   ├── TestDataHelper.ts   # Helper class for data management
│   └── testData.ts         # Test scenarios data
├── pages/                   # Page Objects
│   ├── BasePage.ts         # Base page with common functionality
│   ├── LoginPage.ts        # Login page object
│   └── RegistrationPage.ts # Registration page object
└── specs/                   # Test Specifications
    └── registration.spec.ts # Test cases

Features

- Page Object Model: Separates test logic from page interactions
- Data-Driven Testing: Test data is separated from test logic
- TypeScript: Strong typing and better IDE support
- Reusable Components: Common functionality in base classes
- Easy Maintenance: Centralized locators and data management
- Scalable: Easy to add new test scenarios and page objects

Test Data Structure

The framework uses a structured approach to manage test data:

interface TestScenario {
    name: string;
    login: LoginData;
    registration: RegistrationData;
}

Current test scenarios:
1. Valid Registration Flow (Male user)
2. Female User Registration

Setup

1. Clone the repository:

git clone <repository-url>

cd playwrightMCP_Demo

2. Install dependencies:

npm install

3. Install Playwright browsers:

npx playwright install

Running Tests

Run all tests:

npx playwright test

Run specific test file:

npx playwright test tests/specs/registration.spec.ts

Run tests in headed mode:

npx playwright test --headed

Adding New Test Scenarios

1. Add new test data in tests/data/testData.ts:

{

    name: 'Your Scenario Name',

    login: {

        email: '[email protected]'

    },

    registration: {

        firstName: 'First',

        lastName: 'Last',

        address: 'Address',

        email: '[email protected]',

        phone: '1234567890',

        gender: 'Male' | 'Female',

        country: 'Country Name'

    }

}

2. The test will automatically execute for new scenarios.

Framework Components

Page Objects

- BasePage: Contains common methods and utilities
- LoginPage: Handles login functionality
- RegistrationPage: Manages registration form interactions

Data Management

- TestData.ts: Contains test scenarios
- TestDataHelper: Provides methods to access and manage test data
- Interfaces: Defines structure for test data

Best Practices

1. Keep page objects focused on page-specific functionality
2. Maintain test data separately from test logic
3. Use meaningful scenario names
4. Follow TypeScript naming conventions
5. Keep tests independent and atomic

Contributing

1. Create a new branch for your feature
2. Add/Update tests and page objects
3. Update test data if needed
4. Submit a pull request

Dependencies

- Playwright
- TypeScript
- Node.js
- @executeautomation/playwright-mcp-server - For enhanced test recording and playback
- @playwright/test - Core testing framework

Support

For any questions or issues, please create a new issue in the repository.