Playwrightmcp Demo

🚀 Playwright Test Automation Framework

A powerful and data-driven test automation framework built with Playwright and TypeScript, integrated with @executeautomation/playwright-mcp-server for enhanced test recording and playback. It adopts the Page Object Model design pattern to achieve scalable and easily maintainable automated tests.

L(7,14)M(0,7)L(14,7)'/%3E%3C/g%3E%3C/svg%3E)

🚀 Quick Start

This framework is a powerful and flexible test automation solution. You can quickly set up and start using it by following the steps below.

✨ Features

• Powerful and Flexible: Leverage Playwright's multi-browser support and powerful automation capabilities.
• Data-Driven: Achieve efficient test case execution through test data.
• Easy to Maintain: Adopt the Page Object Model design pattern to improve code reusability and maintainability.
• Highly Scalable: Conveniently add new test scenarios and features.

📚 Documentation

Functionality

• Page Objects: Include base methods and tools (BasePage), login page operations (LoginPage), and registration page interactions (RegistrationPage).
• Data Management: Store test scenarios in the TestData.ts file. The TestDataHelper class provides methods for data access and management.
• Interface Definition: Use TypeScript interfaces to define test data structures, ensuring code consistency and standardization.

Framework Structure

playwright-test-frame/
├── playwright.config.ts
├── tests/
│   ├── specs/
│   │   └── registration.spec.ts
│   └── data/
│       └── testData.ts
└── package.json

Characteristics

1. Page Objects:
   • BasePage: Contains common methods and tools.
   • LoginPage: Handles the login function.
   • RegistrationPage: Manages registration form interactions.
2. Data Management:
   • TestData.ts: Stores test scenarios.
   • TestDataHelper: Provides methods for data access and management.
   • Interface Definition: Uses TypeScript interfaces to define data structures, ensuring code consistency.

Test Data Structure

interface LoginData {
  email: string;
  password?: string;
}

interface RegistrationData {
  firstName: string;
  lastName: string;
  address: string;
  email: string;
  phone: string;
  gender: 'Male' | 'Female';
  country: string;
}

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

Setup

1. Install dependencies:

   npm install playwright @executeautomation/playwright-mcp-server typescript --save-dev
   

2. Create a Playwright configuration file (playwright.config.ts).
3. Start the tests:

   npx playwright test
   

Running Tests

1. Execute all tests:

   npx playwright test
   

2. Execute a specific test file:

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

3. Run in headed mode (show the browser window):

   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'
  }
}

2. The newly added test scenarios will be executed automatically.

Framework Components

Page Objects

• BasePage: Contains common methods and tools.
• LoginPage: Handles the login function.
• RegistrationPage: Manages registration form interactions.

Data Management

• TestData.ts: Stores test scenario data.
• TestDataHelper: Provides methods for data access and management.
• Interface Definition: Uses TypeScript interfaces to define data structures, ensuring code consistency.

Best Practices

1. Keep page objects focused on specific functions.
2. Store test data independently from test logic.
3. Use meaningful scenario names.
4. Follow TypeScript naming conventions.
5. Ensure each test case is independent and atomic.

Contribution Guidelines

1. Create a new branch for new features.
2. Update or add tests and page objects.
3. Submit your code and initiate a pull request.

Dependencies

• Playwright: The test framework.
• Execute Automation MCP Server: Provides additional extended functionality (optional).
• TypeScript: Used to define interfaces and types, ensuring code standardization.

With the above configuration and practices, you can easily build an efficient, flexible, and easily maintainable test automation framework.