๐ญ Playwright Test Automation Framework
๐ญ Modern E2E Testing Framework | Playwright + TypeScript + MCP Server | Data-Driven POM Architecture | Advanced Test Recording & Playback
GoldiSaini
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.
โจ 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:
- Valid Registration Flow (Male user)
- Female User Registration
Setup
- Clone the repository:
git clone <repository-url>
cd playwrightMCP_Demo
- Install dependencies:
npm install
- 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
- 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'
}
}
- 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
- Keep page objects focused on page-specific functionality
- Maintain test data separately from test logic
- Use meaningful scenario names
- Follow TypeScript naming conventions
- Keep tests independent and atomic
Contributing
- Create a new branch for your feature
- Add/Update tests and page objects
- Update test data if needed
- 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
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
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.
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.
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.
@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.
Linear MCP Server
Enables interaction with Linear's API for managing issues, teams, and projects programmatically through the Model Context Protocol.
mermaid-mcp-server
A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.
Jira-Context-MCP
MCP server to provide Jira Tickets information to AI coding agents like Cursor
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.
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.