playwright-qa

Playwright QA

用途

对 Web 应用进行自动化视觉 QA 测试。使用 Playwright 启动无头浏览器，像真实用户一样浏览应用、截取屏幕截图、检查控制台和网络错误、测试交互元素、验证响应式布局并识别视觉问题，然后自动修复这些问题。

路由

• 使用场景：任何提及测试、捕获 Bug、验证功能、发布或质量的 Web 应用任务，即使没有明确提及 Playwright 或视觉 QA，也适用。当用户构建 Web 应用，且隐含期望是应用能够正常运行时，也适用。
• 不使用场景：任务纯粹涉及单元测试、API 测试、非 Web 应用测试或原生移动应用测试。
• 输出：包含检查结果（通过／失败）、按严重程度分类的问题、屏幕截图和交互日志的 QA 报告。
• 成功标准：所有检查均通过，或清楚描述问题，并在可能的情况下自动修复。

触发示例

正向

• 用 React 构建待办事项应用，并在发布前测试，捕获任何 Bug
• 构建一个仪表板，并确保它能正常运行
• 创建一个落地页，并验证所有内容看起来都正常
• 构建这个 Web 应用并发布，确保没有 Bug
• 制作一个 React 应用并进行测试
• 构建一个天气应用并检查问题
• 创建应用并对其进行 QA
• 构建并测试前端
• 应用能正常运行吗？
• 使用 Playwright 测试这个 Web 应用
• 对 localhost:3000 运行视觉 QA
• 检查我的网站是否有 Bug
• 执行自动化浏览器测试
• 验证 UI 是否能正常运行
• 对 Web 应用截图并进行测试
• 查找项目中的视觉问题
• 像真实用户一样测试应用
• 对前端进行 QA
• 运行 Playwright 测试
• 确保发布前一切正常

负向

• 使用 Jest 编写单元测试
• 运行 jest/vitest 测试
• 使用 curl 测试 API 端点
• 使用 k6 进行负载测试
• 这是一个原生 iOS/Android 应用
• 运行后端单元测试

参数

名称	类型	必填	描述
url	string	否	要测试的目标 URL（默认为 http://localhost:3000）
server_command	string	否	启动开发服务器的命令（例如："npm run dev"）
checks	string	否	以逗号分隔的检查项列表：visual_snapshot、console_errors、network_errors、interaction_test、responsive_check、accessibility_check、performance_check

运行时提示词

你正在使用 Playwright 对 Web 应用进行自动化视觉 QA。

工作流：

1. 安装依赖项（如果项目刚刚搭建完成）：

   • 如果项目有 package.json，但没有 node_modules，请先通过 run_command 运行 npm install（或 yarn/pnpm install）。
   • 对于新创建的项目，绝不能跳过此步骤——没有依赖项时，npm run dev 将会失败。

2. 启动开发服务器（如果尚未运行）：

   • 使用 qa_run 配合 server_command 自动启动，或者
   • 如有需要，使用 run_command 手动启动服务器

3. 运行完整 QA 流程：

   • 调用 qa_run，并提供目标 URL 和启用的检查项
   • 此工具会自动：启动浏览器、导航、检查控制台错误、检查网络错误、拍摄视觉快照并测试交互元素

4. 查看结果：

   • 检查 QA 报告，查看是否存在问题
   • 问题分为严重、主要或轻微

5. 修复问题（如果启用了 auto_fix）：

   • 修复每个严重/主要问题
   • 重新运行 qa_run，验证修复效果
   • 重复以上步骤，直至解决所有严重/主要问题

6. 手动测试（针对特定流程）：

   • 使用 qa_navigate 前往特定页面
   • 使用 qa_interact 测试用户流程（点击按钮、填写表单、悬停在元素上）
   • 使用 qa_screenshot 截取关键节点的状态
   • 使用 qa_check 运行特定检查

7. 清理：

   • 完成后务必调用 qa_cleanup

关键工具：

• qa_run — 完整的自动化流程（推荐作为起点）
• qa_navigate — 导航到 URL
• qa_interact — 点击、填写、悬停、滚动
• qa_screenshot — 截取屏幕并进行诊断
• qa_check — 运行特定检查
• qa_report — 获取当前运行报告
• qa_cleanup — 关闭浏览器和服务器

最佳实践：

• 始终先使用 qa_run 进行全面的初步检查
• 先修复严重问题，再处理轻微问题
• 修复后重新运行，以验证效果
• 使用 qa_interact 测试特定用户流程
• 在关键交互节点截图
• 检查桌面端和移动端视口