๐ŸŽญ Playwright Test Automation Framework

๐ŸŽญ Playwright Test Automation Framework

๐ŸŽญ Modern E2E Testing Framework | Playwright + TypeScript + MCP Server | Data-Driven POM Architecture | Advanced Test Recording & Playback

GoldiSaini

Developer Tools
Visit Server

README

๐ŸŽญ 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.

Playwright TypeScript Node.js MCP Server

โœจ 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
  1. Install dependencies:
npm install
  1. 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: 'your.email@test.com'
    },
    registration: {
        firstName: 'First',
        lastName: 'Last',
        address: 'Address',
        email: 'email@test.com',
        phone: '1234567890',
        gender: 'Male' | 'Female',
        country: 'Country Name'
    }
}
  1. 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.

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
MCP Package Docs Server

MCP Package Docs Server

Facilitates LLMs to efficiently access and fetch structured documentation for packages in Go, Python, and NPM, enhancing software development with multi-language support and performance optimization.

Featured
Local
TypeScript
Claude Code MCP

Claude Code MCP

An implementation of Claude Code as a Model Context Protocol server that enables using Claude's software engineering capabilities (code generation, editing, reviewing, and file operations) through the standardized MCP interface.

Featured
Local
JavaScript
@kazuph/mcp-taskmanager

@kazuph/mcp-taskmanager

Model Context Protocol server for Task Management. This allows Claude Desktop (or any MCP client) to manage and execute tasks in a queue-based system.

Featured
Local
JavaScript
Linear MCP Server

Linear MCP Server

Enables interaction with Linear's API for managing issues, teams, and projects programmatically through the Model Context Protocol.

Featured
JavaScript
mermaid-mcp-server

mermaid-mcp-server

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.

Featured
JavaScript
Jira-Context-MCP

Jira-Context-MCP

MCP server to provide Jira Tickets information to AI coding agents like Cursor

Featured
TypeScript
Linear MCP Server

Linear MCP Server

A Model Context Protocol server that integrates with Linear's issue tracking system, allowing LLMs to create, update, search, and comment on Linear issues through natural language interactions.

Featured
JavaScript
Sequential Thinking MCP Server

Sequential Thinking MCP Server

This server facilitates structured problem-solving by breaking down complex issues into sequential steps, supporting revisions, and enabling multiple solution paths through full MCP integration.

Featured
Python