Awesome AI Pedia

Appearance

Agent Browser + Chrome Dev Tools 组合自动化测试教程 ​

一、组合优势概述 ​

为什么要组合使用? ​

工具主要优势Token效率适用场景
Agent Browser超高效率、简洁API⭐⭐⭐⭐⭐快速交互、表单填写
Chrome Dev Tools深度分析、性能调试⭐⭐⭐性能分析、网络监控

组合效果 ​

  • 🚀 效率最大化: Agent Browser 负责高频交互,Chrome Dev Tools 负责深度分析
  • 💰 成本控制: 相比纯 Playwright MCP 节省 90%+ tokens
  • 🔍 能力互补: 既能快速操作,又能深度调试

二、环境搭建 ​

2.1 基础环境准备 ​

bash
# 1. 安装 Agent Browser
npm install -g agent-browser
agent-browser install

# 2. 安装 Chrome Dev Tools MCP
npm install -g chrome-devtools-mcp

# 3. 启动 Chrome 持久化服务
python chrome_persistent_service.py start

五、AI 提示词实例 ​

5.1 组合测试提示词模板 ​

模板 1: 性能测试组合 ​

请帮我执行组合性能测试:

阶段1 - 快速操作(使用 Agent Browser):
1. 打开 https://example.com
2. 点击登录按钮
3. 输入用户名 test@example.com
4. 输入密码 test123
5. 点击提交按钮

阶段2 - 性能分析(使用 Chrome Dev Tools):
6. 分析页面加载性能,获取 LCP 指标
7. 检查内存使用情况
8. 分析所有网络请求,找出响应时间超过 1 秒的请求
9. 提供性能优化建议

阶段3 - 验证(使用 Agent Browser):
10. 截图保存测试结果
11. 验证是否成功登录

请以 JSON 格式返回所有性能数据和建议。

5.2 调试专用提示词 ​

调试模板: 问题诊断组合 ​

遇到了页面加载问题,请帮我诊断:

快速检查(Agent Browser):
1. 打开页面并截图当前状态
2. 检查控制台是否有错误信息
3. 验证关键元素是否可见
4. 测试基本交互是否正常

深度分析(Chrome Dev Tools):
5. 分析网络请求是否有失败的
6. 检查 JavaScript 控制台错误
7. 分析页面加载时间分布
8. 检查内存泄漏情况
9. 分析 DOM 结构变化

验证修复(Agent Browser):
10. 根据分析结果重试操作
11. 验证问题是否解决
12. 截图对比修复前后的状态

请提供:
- 错误原因分析
- 具体的修复建议
- 预防类似问题的方法

六、最佳实践 ​

6.1 使用原则 ​

  1. 效率优先: 常规操作优先使用 Agent Browser
  2. 按需切换: 需要深度分析时才切换到 Chrome Dev Tools
  3. 数据整合: 将两种工具的结果整合分析
  4. 成本控制: 监控 token 使用情况

6.3 错误处理策略 ​

健壮性设计原则:

  1. 超时控制: 为每个操作设置合理的超时时间
  2. 重试机制: 关键操作失败后自动重试
  3. 降级策略: Chrome Dev Tools 不可用时降级为纯 Agent Browser
  4. 日志记录: 详细记录每个步骤的执行情况

总结与最佳实践 ​

8.1 关键优势 ​

  1. Token 效率提升 90%+ 相比纯 Playwright MCP
  2. 功能互补: 快速操作 + 深度分析
  3. 成本可控: 智能切换,避免不必要的消耗
  4. 错误健壮: 完整的异常处理机制

8.2 使用建议 ​

  • 开发阶段: Agent Browser 为主,快速迭代
  • 调试阶段: Chrome Dev Tools 深度分析
  • 生产阶段: 组合使用,全面覆盖