Playwright MCP Demo

🎭 剧作家测试自动化框架

🚀 一个强大的、数据驱动的测试自动化框架，使用Playwright和TypeScript构建，利用@executeautomation/streamer mcp服务器增强测试记录和回放功能。特性页面对象模型设计模式，用于可扩展和可维护的自动化测试。

  ](https://nodejs.org/) 

✨ 亮点

• 🏗️ 页面对象模型 -干净且可维护的测试架构
• 📊 数据驱动测试 -使用外部测试数据轻松扩展测试
• 🔧 TypeScript支持 -强大的类型检查和更好的IDE集成
• ♻️ 可重用组件 -模块化设计，实现最大程度的代码重用
• 🎯 易于维护 -集中式定位器和数据管理
• 📈 可扩展设计 -轻松添加新的测试场景
• 🎥 MCP服务器集成 -增强的测试记录和回放功能

🌟 主要特点

• 结构化和有组织的测试架构
• 测试数据与测试逻辑的分离
• 用于常见操作的强大辅助方法
• 易于遵循的页面对象模式实现
• 全面的测试数据管理
• 即用型注册流程示例
• 使用MCP服务器进行测试记录和回放
• 自动生成测试脚本

框架结构

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

特性

• 页面对象模型：将测试逻辑与页面交互分离
• 数据驱动测试：测试数据与测试逻辑分离
• TypeScript：强大的类型和更好的IDE支持
• 可重用组件：基类中的通用功能
• 易于维护：集中式定位器和数据管理
• 可扩展的：易于添加新的测试场景和页面对象

测试数据结构

该框架使用结构化方法来管理测试数据：

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

当前测试场景：

1. 有效注册流程（男性用户）
2. 女性用户注册

设置

1. 克隆存储库：

git clone 
cd playwrightMCP_Demo

1. 安装依赖项：

npm install

1. 安装Playwright浏览器：

npx playwright install

运行测试

运行所有测试：

npx playwright test

运行特定测试文件：

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

在头部模式下运行测试：

npx playwright test --headed

添加新的测试场景

1. 在中添加新的测试数据 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. 对于新场景，测试将自动执行。

框架组件

页面对象

• 基础页面：包含常用方法和实用程序
• 登录页面：处理登录功能
• 注册页面：管理注册表交互

数据管理

• TestData.ts：包含测试场景
• 测试数据助手：提供访问和管理测试数据的方法
• 接口：定义测试数据的结构

最佳实践

1. 使页面对象专注于页面特定的功能
2. 将测试数据与测试逻辑分开维护
3. 使用有意义的场景名称
4. 遵循TypeScript命名约定
5. 保持测试的独立性和原子性

贡献

1. 为您的功能创建新分支
2. 添加/更新测试和页面对象
3. 如果需要，更新测试数据
4. 提交拉取请求

依赖项

• 剧作家
• TypeScript
• Node.js
• @executeautomation/剧作家mcp服务器-用于增强测试记录和回放
• @剧作家/测试-核心测试框架

支持

如有任何疑问或问题，请在存储库中创建一个新问题。