Playwright With MCP

使用MCP的剧作家-测试自动化框架

一个全面的测试自动化项目 剧作家 和 MCP（模型上下文协议） 用于自动化UI测试和API测试场景。该项目展示了端到端测试和API验证的最佳实践。

📋 目录

• 概述
• 特性
• 项目结构
• 先决条件
• 安装
• 配置
• 运行测试
• 测试用例
• 页面对象模型（POM）
• API测试
• 项目结构详图
• 贡献
• 许可证

🎯 概述

该项目为使用Playwright进行自动化测试提供了一个强大的测试框架。它包括：

• UI自动化测试 使用页面对象模型模式
• API测试 具有请求验证和JSON模式验证功能
• 结构化测试组织 遵循行业最佳实践
• 综合录井 用于调试和测试见解

✨ 特性

• ✅ 页面对象模型（POM） 用于可维护的UI测试
• ✅ API测试 具有剧作家请求上下文
• ✅ JSON模式验证 使用Ajv
• ✅ 跨浏览器测试 （Chromium、Firefox、WebKit）
• ✅ HTML测试报告 详细结果
• ✅ 异步/等待 干净代码的语法
• ✅ 详细的控制台日志记录 用于调试
• ✅ 类型安全 支持TypeScript

📁 项目结构

PlaywrightWithMCP/
├── tests/
│   ├── example.spec.ts              # Example Playwright test
│   ├── tshirts.spec.ts              # E-commerce product search test
│   ├── tshirts.specPOM.ts           # POM-based T-shirt search test
│   └── fakestore-api.spec.ts        # FakeStore API validation test
├── testcontexts/
│   ├── pages.ts                     # Page Object Model definitions
│   ├── APITestContext.txt           # API testing guidelines
│   └── webTestContext.txt           # Web testing guidelines
├── playwright.config.ts             # Playwright configuration
├── package.json                     # Project dependencies
├── package-lock.json                # Dependency lock file
├── playwright-report/               # HTML test reports (generated)
├── test-results/                    # Test results (generated)
├── .gitignore                       # Git ignore rules
└── README.md                        # Project documentation

🔧 先决条件

• Node.js （建议使用v18或更高版本）
• npm （v9或更高）
• Git （用于版本控制）

📦 安装

1. 克隆存储库：

   git clone 
   cd PlaywrightWithMCP

1. 安装依赖项：

   npm install

1. 安装Playwright浏览器：

   npx playwright install

⚙️ 配置

该项目是使用配置的 playwright.config.ts 具有以下设置：

• 测试目录： ./tests
• 记者： HTML报告生成
• 浏览器： Chromium、Firefox、WebKit
• 并行执行： 默认情况下启用
• 跟踪： 首次重试时收集

关键配置选项：

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

🚀 运行测试

运行所有测试

npx playwright test

运行特定测试文件

npx playwright test tests/fakestore-api.spec.ts

使用特定浏览器运行测试

npx playwright test --project chromium

在Headed模式下运行测试（请参阅浏览器）

npx playwright test --headed

在调试模式下运行测试

npx playwright test --debug

查看HTML报告

npx playwright show-report

仅生成测试报告

npx playwright test --reporter=html

📝 测试用例

1. FakeStore API测试 (fakestore-api.spec.ts)

目标： 验证REST API响应和数据架构

步骤：

1. 将GET请求发送到 https://fakestoreapi.com/products/1
2. 验证响应状态代码是否为200
3. 验证是否存在所有必需的密钥： id, title, price, category, description
4. 使用Ajv验证JSON模式
5. 记录产品详细信息（标题、价格、类别）
6. 验证数据类型

特征：

• 状态代码验证
• 使用Ajv进行JSON模式验证
• 必填字段验证
• 数据类型断言
• 详细的控制台日志记录
• 错误处理和调试日志

输出示例：

📌 Starting API test for endpoint: https://fakestoreapi.com/products/1
✅ Status code 200 verified
✅ All required keys validated
✅ JSON Schema validation passed
📋 Product Details:
  📝 Product Title: Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops
  💰 Product Price: $109.95

2. T恤搜索测试（POM） (tshirts.specPOM.ts)

目标： 使用页面对象模型搜索产品并验证结果

步骤：

1. 引导到 http://www.automationpractice.pl/index.php
2. 搜索“T恤”
3. 验证结果中是否出现“褪色短袖T恤”

图案： 页面对象模型（POM）

3. 电子商务产品搜索 (tshirts.spec.ts)

目标： 传统电子商务产品搜索测试

步骤：

1. 导航到自动化实践网站
2. 搜索产品
3. 验证搜索结果

🏗️ 页面对象模型（POM）

该项目使用 页面对象模型 可维护和可重用测试代码的设计模式。

POM等级： testcontexts/pages.ts

主页类

export class HomePage {
  readonly page: Page;
  readonly searchInput: Locator;
  readonly searchButton: Locator;

  async goto() { }
  async searchFor(item: string) { }
}

SearchResults页面类

export class SearchResultsPage {
  readonly page: Page;
  readonly productNames: Locator;

  async isProductVisible(productName: string): Promise { }
}

POM的好处：

• ✅ 提高了测试的可维护性
• ✅ 减少代码重复
• ✅ 更简单的定位器更新
• ✅ 更好的可读性
• ✅ 简化测试逻辑

🔌 API测试

验证框架

该项目使用 艾夫 （另一个JSON模式验证器）用于全面的JSON模式验证。

JSON模式示例：

const productSchema = {
  type: 'object',
  properties: {
    id: { type: 'number' },
    title: { type: 'string' },
    price: { type: 'number' },
    category: { type: 'string' },
    description: { type: 'string' },
  },
  required: ['id', 'title', 'price', 'category', 'description']
};

API测试步骤：

1. ✅ 使用发送HTTP请求 request.get()
2. ✅ 验证响应状态代码
3. ✅ 解析JSON响应体
4. ✅ 验证所需密钥是否存在
5. ✅ 使用JSON模式验证数据类型
6. ✅ 断言特定值
7. ✅ 记录调试结果

📊 项目结构详图

/tests 目录

• 包含所有测试规范(.spec.ts 文件）
• 测试遵循Playwright命名约定
• 每个测试文件代表一个测试套件

/testcontexts 目录

• pages.ts -页面对象模型定义
• 记录测试指南的上下文文件
• 多个测试文件的可重用页面对象

/playwright-report 目录（已生成）

• HTML测试执行报告
• 测试结果和执行细节
• 失败测试的截图和跟踪

/test-results 目录（已生成）

• 详细的测试结果数据
• JSON格式测试结果
• 用于CI/CD集成

📦 依赖项

开发依赖关系

• @剧作家/测试 （^1.56.1）-主要测试框架
• @类型/节点 （^24.10.1）-TypeScript Node.js类型

依赖项

• ajv （^8.17.1）-JSON模式验证器

🔄 典型工作流程

1. 编写测试 -在中创建新的测试文件 /tests
2. 定义POM -在中添加页面对象 /testcontexts/pages.ts
3. 运行测试 -执行 npx playwright test
4. 评审结果 -使用查看HTML报告 npx playwright show-report
5. 调试 -对失败的测试使用调试模式
6. 提交 -将更改推送到GitHub

💡 最佳实践

测试组织

• 每个文件一个测试套件
• 描述性测试名称
• 明确测试目标
• 正确设置和拆卸

代码质量

• 使用TypeScript实现类型安全
• 遵循页面对象模型模式
• DRY（不要重复自己）原则
• 明确变量和方法名称

日志记录

• 添加有意义的控制台日志
• 包括表情符号以进行快速视觉扫描
• 记录关键断言点
• 提供调试信息

API测试

• 验证状态代码
• 验证响应模式
• 检查必填字段
• 验证数据类型
• 测试边缘案例

🐛 调试

启用调试模式

npx playwright test --debug

查看痕迹

重试时会自动收集痕迹并将其包含在HTML报告中。

控制台日志

测试包括详细的控制台日志记录，以便在执行过程中获得即时反馈。

📋 测试执行示例

# Run all tests
npm test

# Run specific test file
npx playwright test tests/fakestore-api.spec.ts

# Run with specific browser
npx playwright test --project chromium

# Run in headed mode
npx playwright test --headed

# Debug mode
npx playwright test --debug

# Generate and open report
npx playwright test && npx playwright show-report

🤝 贡献

1. 为您的功能创建新分支
2. 按照现有模式编写测试
3. 确保所有测试通过
4. 以明确的信息提交
5. 推送并创建拉取请求

📄 许可证

ISC许可证-详见package.json

📞 支持

对于问题或疑问：

1. 检查现有测试文件中的示例
2. 查看剧作家文档：https://playwright.dev
3. 查看Ajv文档：https://ajv.js.org
4. 查看测试输出和错误消息

🔗 有用的资源

• 剧作家文档
• 剧作家API参考
• 页面对象模型指南
• JSON模式规范
• Ajv文档

______________________________________________________________________

创建于❤️ 使用Playwright和TypeScript

最后更新日期：2025年11月