🎭 使用Playwright MCP进行通用Web测试
使用Playwright MCP测试任何网站-保持相同的Excel格式，更改目标网站
  
______________________________________________________________________
📋 目录
______________________________________________________________________
🎯 概述
这是一个 通用web测试框架 使用 剧作家MCP（模型上下文协议） 使用GitHub Copilot测试任何网站。只需配置目标网站，保持Excel测试场景的格式不变，然后开始测试。
🌟 关键特性：只需编辑配置文件即可测试任何网站，无需更改代码！
演示目标: 谷歌航班 （轻松切换到您的网站）
这是给谁的？
| 受众 | 价值主张 |
|---|---|
| QA经理 | 使用一个框架测试多个网站 |
| 手动测试仪 | 无需编码的AI辅助测试 |
| 测试自动化团队 | 为新项目快速创建测试 |
| 利益相关方 | 跨应用程序的一致测试方法 |
______________________________________________________________________
🤖 什么是剧作家MCP？
剧作家MCP 是一个模型上下文协议服务器，它使AI助手（如GitHub Copilot）能够使用Playwright与web浏览器进行交互。这允许手动测试人员：
- 🔍 浏览网站 使用自然语言命令
- 📸 截图 自动生成页面快照
- ✅ 验证功能 通过人工智能辅助测试
- 📝 记录调查结果 详细观察
- 🎯 执行测试场景 无需编写代码
运作原理
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ VS Code + │────▶│ Playwright │────▶│ Google │
│ GitHub Copilot │ │ MCP Server │ │ Flights │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
│ Natural Language │ Browser Actions │
│ Commands │ (Click, Type, etc) │
└───────────────────────┴───────────────────────┘______________________________________________________________________
✨ 主要特点
🌐 通用网站测试
- 测试任何网站 通过编辑一个简单的YAML配置文件
- 无代码更改 需要切换目标网站
- 支持多个域：旅游、电子商务、金融或海关
- 相同的Excel格式 适用于所有网站
🎭 智能AI测试代理
预配置的GitHub Copilot自定义代理：
- 自动适应您的目标网站
- 读取配置并调整测试方法
- 执行Excel驱动的测试场景
- 用截图记录调查结果
📊 Excel驱动的测试场景
- 一致格式 跨所有网站类型
- 必填栏：测试用例ID、测试用例区域、测试用例名称、测试用例描述、再现步骤、运行、预期结果、执行结果、观察结果、测试用例严重性、执行人、执行日期、创建人、注释
- 特定域列：添加旅行、电子商务、金融或自定义列
- 易于维护：更新Excel中的测试，而不是代码
- 专业格式：包括执行跟踪和结果文件
📖 完整的文件
🎬 准备部署
非常适合多个项目：
- 旅游/预订网站（航班、酒店、租车）
- 电子商务商店（购物、购物车、结账）
- 金融应用程序（银行、支付）
- 自定义web应用程序（任何域）
______________________________________________________________________
🚀 快速开始
1.克隆存储库
git clone https://github.com/mohammadbanyalitest/playwright-mcp-google-flights-demo.git
cd playwright-mcp-google-flights-demo2.设置剧作家MCP
关注我们的详细信息 安装指南 致：
- 使用GitHub Copilot安装VS代码
- 配置Playwright MCP服务器
- 设置自定义代理
3.配置您的目标网站
target:
name: "Your Website"
url: "https://your-website.com"
domain: "custom" # or travel, e-commerce, finance
test_data:
schema: "custom"
primary_file: "test-scenarios/your-tests.xlsx"或者保留谷歌航班 作为默认演示目标。
4.开始测试
打开VS Code，激活Playwright测试代理，然后尝试：
@playwright-tester Read the deployment config and explore the target website.
Take screenshots and document the key features.就是这样！ 代理会自动适应您配置的网站。
______________________________________________________________________
🤖 使用自定义代理
此存储库包括 万能试验剂 适用于任何网站：
激活代理
- 使用GitHub Copilot聊天打开VS代码
- 在聊天面板中，键入
@playwright-tester - 代理会自动读取您的
config/deployment.yaml - 用自然语言给出测试说明
通用命令（适用于任何网站）
| 任务 | 提示 |
|---|---|
| 探索 | “阅读部署配置并浏览目标网站” |
| 运行测试 | “从Excel文件执行所有测试方案” |
| 运行一个测试 | “从Excel文件运行测试用例TC001” |
| 截图 | “截取当前页面的屏幕截图” |
| 验证 | “检查搜索功能是否正常工作” |
特定领域示例
对于旅游网站：
Test a round-trip flight search using TC001 from the Excel file对于电子商务网站：
Test product search and add to cart using TC001 and TC002对于任何自定义网站：
Execute the test scenarios and report results代理能力
通用代理可以：
- 🌐 导航到任何配置的网站
- 📖 读取配置并调整行为
- 📊 执行Excel驱动的测试场景
- 🖱️ 单击、键入并与元素交互
- 📸 捕获屏幕截图和快照
- 🔍 动态分析页面内容
- ✅ 验证预期行为
- 📝 生成详细的测试报告
看 通用测试指南 为了获得全面的示例。
______________________________________________________________________
🎬 演示演练
🎥 演示视频即将推出 -将添加一个录制的演练来演示全部功能。
快速演示步骤
- 打开VS代码 启用GitHub Copilot
- 激活代理 使用
@playwright-tester - 探索谷歌航班：请代理导航和探索
- 运行测试：请求飞行搜索测试
- 验证结果：让代理验证过滤器和排序
- 收集证据：请求调查结果截图
有关完整的演示脚本，请参阅 docs/demo-script.md.
______________________________________________________________________
💼 QA团队的好处
🚀 通用框架优势
| 挑战 | 解决方案 |
|---|---|
| 测试多个网站 | 一个框架适用于所有网站 |
| 不同的测试格式 | 到处都是相同的Excel格式 |
| 每个项目学习新工具 | 一次学习，随处使用 |
| 维护多个框架 | 维护单个代码库 |
⏱️ 节省时间
| 手动任务 | 使用通用MCP测试 |
|---|---|
| 设置新项目测试 | 5分钟（编辑配置） |
| 导航和截图 | 自动 |
| 记录测试步骤 | AI生成 |
| 适应新网站 | 自动 |
| 创建测试报告 | 简化 |
📈 提高覆盖率
- 人工智能辅助探索 发现人类可能错过的边缘病例
- 一致的文档 在所有测试会话中
- 快速迭代 允许测试更多场景
- 多网站支持 实现更广泛的测试覆盖
🎯 减少重复性工作
- 无代码更改 切换网站
- 相同的Excel格式 在所有项目中
- 可重复使用的配置 模板
- 自动截图 管理
📊 更好的文档
- 带有元素分析的详细页面快照
- 每个网站的时间戳截图
- 清晰、可操作的测试报告
- 所有项目格式一致
💡 投资回报率亮点
| 度量 | 影响 |
|---|---|
| 新项目设置 | 速度提高90%（配置与代码） |
| 测试执行时间 | 减少30-50% |
| 文档时间 | 减少60-70% |
| 测试覆盖率 | 增加20-40% |
| 框架维护 | 所有项目的单一代码库 |
______________________________________________________________________
📚 文档
快速入门指南
综合指南
核心文件
配置文件
| 文件 | 目的 |
|---|---|
config/deployment.yaml | 在此处配置您的目标网站 |
config/data-schema.yaml | 每个域的可用列 |
config/selectors-template.json | 自定义元素选择器 |
示例测试场景（谷歌航班演示）
______________________________________________________________________
📋 先决条件
在开始之前，请确保您已经：
| 要求 | 版本 | 目的 |
|---|---|---|
| VS Code | 最新 | 带有GitHub Copilot的IDE |
| GitHub Copilot | 主动订阅 | 人工智能协助 |
| Node.js | 18+ | 剧作家MCP运行时 |
| 剧作家MCP | 最新 | 浏览器自动化服务器 |
请参阅 安装指南 了解详细的安装说明。
______________________________________________________________________
🆘 支持
获取帮助
贡献
我们欢迎捐款！看 贡献.md 作为指导方针。
______________________________________________________________________
📄 许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
______________________________________________________________________
准备好在人工智能的帮助下测试任何网站了吗？
______________________________________________________________________
快速示例
测试电子商务网站：
# Edit config/deployment.yaml
target:
url: "https://your-store.com"
domain: "e-commerce"测试旅游网站：
# Edit config/deployment.yaml
target:
url: "https://travel-site.com"
domain: "travel"测试任何自定义站点：
# Edit config/deployment.yaml
target:
url: "https://any-website.com"
domain: "custom"然后运行： @playwright-tester Read deployment config and execute tests