🎭 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)

亮点

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

功能

• 页面对象：包含基础方法和工具（BasePage）、登录页面操作（LoginPage）、注册页面交互（RegistrationPage）。
• 数据管理：通过TestData.ts文件存储测试场景，TestDataHelper类提供数据访问和管理方法。
• 接口定义：使用 TypeScript 接口定义测试数据结构，确保代码的一致性和规范性。

框架结构

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

特性

1. 页面对象：

   • BasePage: 包含通用方法和工具。
   • LoginPage: 处理登录功能。
   • RegistrationPage: 管理注册表单交互。

2. 数据管理：

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

设置

1. 安装依赖：

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

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

3. 启动测试：

   npx playwright test
   

运行测试

1. 执行所有测试：

   npx playwright test
   

2. 执行特定测试文件：

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

3. 以有头模式运行（显示浏览器窗口）：

   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. 新增的测试场景将自动执行。

框架组件

页面对象

• BasePage: 包含通用方法和工具。
• LoginPage: 处理登录功能。
• RegistrationPage: 管理注册表单交互。

数据管理

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

最佳实践

1. 保持页面对象专注于特定功能。
2. 将测试数据独立于测试逻辑存储。
3. 使用有意义的场景名称。
4. 遵循 TypeScript 命名规范。
5. 确保每个测试用例独立且原子化。

贡献指南

1. 为新特性创建新的分支。
2. 更新或添加测试和页面对象。
3. 提交代码并发起拉取请求。

依赖

• Playwright: 测试框架。
• Execute Automation MCP Server: 提供额外的扩展功能（可选）。
• TypeScript: 用于定义接口和类型，确保代码规范性。

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