What is Playwrightmcp Demo

playwrightMCP_Demo is a modern end-to-end testing framework built using Playwright and TypeScript. It utilizes the MCP Server to enhance test recording and playback capabilities, employing a data-driven Page Object Model architecture for scalable and maintainable automated testing.

Use cases

Use cases for playwrightMCP_Demo include testing web applications for functionality and performance, automating repetitive testing tasks, integrating with CI/CD workflows for continuous testing, and recording and replaying test scenarios for easier debugging.

How to use

To use playwrightMCP_Demo, set up the environment with Node.js and install the necessary dependencies. Write test cases using the Page Object Model pattern, and leverage the MCP Server for advanced test recording and playback functionalities.

Key features

Key features include a clean Page Object Model architecture, data-driven testing capabilities, TypeScript support for robust type checking, reusable components for maximum code reuse, easy maintenance with centralized locators, and seamless integration with MCP Server for enhanced test functionalities.

Where to use

playwrightMCP_Demo can be used in various fields such as web application testing, automated regression testing, and continuous integration/continuous deployment (CI/CD) pipelines, where reliable and maintainable test automation is essential.

🎭 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.