Playwrightmcp Demo

🚀 🎭 Playwright 测试自动化框架

这是一个强大且数据驱动的测试自动化框架，使用 Playwright 和 TypeScript 构建。它结合了 @executeautomation/playwright - mcp - server，实现了增强的测试录制和播放功能。采用页面对象模型（Page Object Model）设计模式，能让自动化测试变得可扩展且易于维护。

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

🚀 快速开始

安装依赖

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

创建配置文件

创建 Playwright 配置文件（playwright.config.ts）。

启动测试

npx playwright test

✨ 主要特性

• 强大且灵活：借助 Playwright 的多浏览器支持和强大的自动化能力，让测试更加全面。
• 数据驱动：通过测试数据实现高效的用例执行，提升测试效率。
• 易于维护：采用页面对象模型（Page Object Model）设计模式，提高代码复用性和可维护性。
• 扩展性强：方便添加新的测试场景和功能，适应不断变化的测试需求。

📦 安装指南

安装依赖时，运行以下命令：

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

💻 使用示例

基础用法

执行所有测试

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

2. 新增的测试场景将自动执行。

📚 详细文档

框架结构

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

功能模块

页面对象

• BasePage：包含基础方法和工具。
• LoginPage：处理登录页面操作。
• RegistrationPage：负责注册页面交互。

数据管理

• TestData.ts：通过该文件存储测试场景。
• TestDataHelper：该类提供数据访问和管理方法。
• 接口定义：使用 TypeScript 接口定义测试数据结构，确保代码的一致性和规范性。

测试数据结构

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

🔧 技术细节

框架组件

页面对象

• BasePage：包含通用方法和工具，为其他页面对象提供基础支持。
• LoginPage：专注于处理登录功能，封装了登录相关的操作。
• RegistrationPage：负责管理注册表单交互，保证注册流程的自动化测试。

数据管理

• TestData.ts：存储测试场景数据，方便对不同测试场景进行管理。
• TestDataHelper：提供数据访问和管理的方法，确保数据的有效使用。
• 接口定义：使用 TypeScript 接口定义数据结构，使得代码更加规范和一致。

最佳实践

1. 保持页面对象专注于特定功能，提高代码的内聚性。
2. 将测试数据独立于测试逻辑存储，便于数据的维护和更新。
3. 使用有意义的场景名称，增强测试代码的可读性。
4. 遵循 TypeScript 命名规范，保证代码的规范性。
5. 确保每个测试用例独立且原子化，避免测试用例之间的相互影响。

贡献指南

1. 为新特性创建新的分支，便于代码的管理和版本控制。
2. 更新或添加测试和页面对象，保证新特性的正确性和可测试性。
3. 提交代码并发起拉取请求，与团队成员共同协作。

依赖

• Playwright：作为测试框架，提供多浏览器支持和强大的自动化能力。
• Execute Automation MCP Server：提供额外的扩展功能（可选），增强框架的功能。
• TypeScript：用于定义接口和类型，确保代码规范性。

通过以上配置和实践，您可以轻松构建一个高效、灵活且易于维护的测试自动化框架。