Agent Browser + Chrome Dev Tools 组合自动化测试教程
一、组合优势概述
为什么要组合使用？
| 工具 | 主要优势 | Token效率 | 适用场景 |
|---|---|---|---|
| Agent Browser | 超高效率、简洁API | ⭐⭐⭐⭐⭐ | 快速交互、表单填写 |
| Chrome Dev Tools | 深度分析、性能调试 | ⭐⭐⭐ | 性能分析、网络监控 |
组合效果：
- 🚀 效率最大化：Agent Browser 负责高频交互，Chrome Dev Tools 负责深度分析
- 💰 成本控制：相比纯 Playwright MCP 节省 90%+ tokens
- 🔍 能力互补：既能快速操作，又能深度调试
二、环境搭建
2.1 基础环境准备
# 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
2.2 Chrome 持久化服务配置
创建 chrome_persistent_service.py：
#!/usr/bin/env python3
"""
Chrome持久化服务管理器
确保浏览器实例在后台稳定运行
"""import subprocess
import time
import requests
from pathlib import Pathclass ChromePersistentService:def __init__(self, port=9222):self.port = portself.process = Nonedef is_chrome_running(self):"""检查Chrome是否在指定端口运行"""try:response = requests.get(f"http://127.0.0.1:{self.port}/json/version", timeout=2)return response.status_code == 200except:return Falsedef start_chrome(self):"""启动Chrome实例"""if self.is_chrome_running():print(f"✅ Chrome已在端口{self.port}运行")return Truechrome_cmd = ["google-chrome", # 或 "chromium-browser"f"--remote-debugging-port={self.port}","--no-first-run","--no-default-browser-check","--disable-background-timer-throttling"]try:self.process = subprocess.Popen(chrome_cmd)time.sleep(3)return self.is_chrome_running()except Exception as e:print(f"❌ Chrome启动失败: {e}")return False# 使用示例
if __name__ == "__main__":service = ChromePersistentService()service.start_chrome()
三、组合使用模式
3.1 模式一：快速交互 + 性能验证
场景：用户登录流程测试
#!/bin/bash
# login_performance_test.shecho "=== 开始登录性能测试 ==="# 1. Agent Browser 快速操作
agent-browser open https://example.com/login# 2. 快速填写表单（Agent Browser 高效率）
agent-browser find placeholder "邮箱" fill "test@example.com"
agent-browser find placeholder "密码" fill "password123"
agent-browser find role button click --name "登录"# 3. 切换到 Chrome Dev Tools 进行性能分析
echo "切换到性能分析模式..."
#chrome-devtools start-tracing# 4. 重新加载页面获取性能数据
agent-browser reload# 5. 使用 Chrome Dev Tools 分析性能
#chrome-devtools get-performance-metrics
#chrome-devtools analyze-lcp
#chrome-devtools check-memory-usage# 6. 截图保存结果
agent-browser screenshot login_performance_result.pngecho "=== 测试完成 ==="
3.2 模式二：网络监控 + 快速操作
场景：API 性能测试
#!/bin/bash
# api_monitoring_test.shecho "=== API 监控测试 ==="# 1. 启动网络监控（Chrome Dev Tools）
#chrome-devtools enable-network-monitoring# 2. Agent Browser 执行用户操作
agent-browser open https://api-demo.com# 3. 触发 API 请求
agent-browser click "#load-data-button"
agent-browser wait --text "数据加载完成"# 4. 分析网络请求（Chrome Dev Tools）
echo "分析网络请求性能..."
#chrome-devtools get-network-requests --filter api
#chrome-devtools find-slow-requests --threshold 1000# 5. 验证数据正确性（Agent Browser）
agent-browser get text ".data-container"
agent-browser is visible ".success-message"# 6. 生成报告
agent-browser screenshot api_test_result.pngecho "=== API 监控完成 ==="
四、Python 集成实例
4.1 完整集成脚本
创建 agent_chrome_combo.py：
#!/usr/bin/env python3
"""
Agent Browser + Chrome Dev Tools 组合自动化
"""import asyncio
import subprocess
import json
from datetime import datetimeclass BrowserAutomationCombo:def __init__(self):self.chrome_port = 9222self.results = []async def run_agent_browser_command(self, command):"""执行 Agent Browser 命令"""try:result = subprocess.run(f"agent-browser {command}",shell=True,capture_output=True,text=True)return {"tool": "agent-browser","command": command,"output": result.stdout,"error": result.stderr,"timestamp": datetime.now().isoformat()}except Exception as e:return {"tool": "agent-browser","command": command,"error": str(e),"timestamp": datetime.now().isoformat()}async def run_chrome_devtools_command(self, command):"""执行 Chrome Dev Tools 命令"""try:result = subprocess.run(f"chrome-devtools-mcp {command}",shell=True,capture_output=True,text=True)return {"tool": "chrome-devtools","command": command,"output": result.stdout,"error": result.stderr,"timestamp": datetime.now().isoformat()}except Exception as e:return {"tool": "chrome-devtools","command": command,"error": str(e),"timestamp": datetime.now().isoformat()}async def ecommerce_test_workflow(self):"""电商网站完整测试流程"""print("🚀 开始电商网站组合测试...")# 1. 快速导航（Agent Browser）print("\n1️⃣ 导航到电商网站...")result = await self.run_agent_browser_command("open https://shop.example.com")self.results.append(result)# 2. 获取页面结构（Agent Browser 高效率）print("\n2️⃣ 分析页面结构...")result = await self.run_agent_browser_command("snapshot -i")self.results.append(result)# 3. 搜索商品（Agent Browser）print("\n3️⃣ 搜索商品...")result = await self.run_agent_browser_command('find placeholder "搜索" fill "iPhone 15"')self.results.append(result)result = await self.run_agent_browser_command('find role button click --name "搜索"')self.results.append(result)# 4. 性能分析（Chrome Dev Tools）print("\n4️⃣ 分析搜索结果页面性能...")result = await self.run_chrome_devtools_command("start-tracing")self.results.append(result)result = await self.run_chrome_devtools_command("analyze-lcp")self.results.append(result)# 5. 点击商品（Agent Browser）print("\n5️⃣ 选择商品...")result = await self.run_agent_browser_command("find first .product-item click")self.results.append(result)# 6. 网络请求分析（Chrome Dev Tools）print("\n6️⃣ 分析商品详情页网络请求...")result = await self.run_chrome_devtools_command("get-network-requests")self.results.append(result)result = await self.run_chrome_devtools_command("find-slow-requests --threshold 500")self.results.append(result)# 7. 添加到购物车（Agent Browser）print("\n7️⃣ 添加到购物车...")result = await self.run_agent_browser_command('find role button click --name "加入购物车"')self.results.append(result)# 8. 内存使用检查（Chrome Dev Tools）print("\n8️⃣ 检查内存使用情况...")result = await self.run_chrome_devtools_command("check-memory-usage")self.results.append(result)# 9. 截图保存（Agent Browser）print("\n9️⃣ 保存测试结果...")result = await self.run_agent_browser_command("screenshot combo_test_result.png")self.results.append(result)# 10. 关闭浏览器result = await self.run_agent_browser_command("close")self.results.append(result)print("\n✅ 组合测试完成！")async def generate_report(self):"""生成测试报告"""report = {"test_id": datetime.now().strftime("%Y%m%d_%H%M%S"),"summary": {"total_commands": len(self.results),"agent_browser_commands": len([r for r in self.results if r["tool"] == "agent-browser"]),"chrome_devtools_commands": len([r for r in self.results if r["tool"] == "chrome-devtools"]),"errors": len([r for r in self.results if r.get("error")])},"details": self.results}# 保存报告with open(f"combo_test_report_{report['test_id']}.json", "w", encoding="utf-8") as f:json.dump(report, f, indent=2, ensure_ascii=False)print(f"\n📊 报告已保存: combo_test_report_{report['test_id']}.json")return reportasync def main():combo = BrowserAutomationCombo()# 运行组合测试await combo.ecommerce_test_workflow()# 生成报告await combo.generate_report()if __name__ == "__main__":asyncio.run(main())
五、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 格式返回所有性能数据和建议。
模板 2：电商网站完整测试
执行电商网站的完整组合测试：快速交互阶段（Agent Browser）：
- 访问 https://shop.demo.com
- 搜索 "笔记本电脑"
- 筛选价格范围 5000-8000 元
- 选择评价最高的商品
- 添加到购物车分析阶段（Chrome Dev Tools）：
- 分析商品列表页的渲染性能
- 监控添加购物车时的网络请求
- 检查页面加载的资源大小和数量
- 分析 JavaScript 执行时间验证阶段（Agent Browser）：
- 验证购物车中商品数量正确
- 验证总价计算准确
- 截图保存最终状态请提供详细的性能报告和操作日志。
模板 3：响应式设计测试
帮我测试网站的响应式设计：步骤1 - 多设备快速测试（Agent Browser）：
1. 在桌面模式（1920x1080）打开 https://example.com
2. 截图保存桌面版布局
3. 切换到平板模式（768x1024）
4. 截图保存平板版布局
5. 切换到手机模式（375x667）
6. 截图保存手机版布局步骤2 - 详细分析（Chrome Dev Tools）：
7. 分析每种设备尺寸的 CSS 媒体查询
8. 检查图片资源的响应式加载
9. 分析字体大小和行高的适配
10. 检查触摸目标的大小（手机模式）步骤3 - 问题汇总（Agent Browser）：
11. 对比三个截图，找出布局问题
12. 总结响应式设计的优缺点请提供三个截图和详细的分析报告。
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 使用原则
- 效率优先：常规操作优先使用 Agent Browser
- 按需切换：需要深度分析时才切换到 Chrome Dev Tools
- 数据整合：将两种工具的结果整合分析
- 成本控制：监控 token 使用情况
6.2 性能优化脚本
创建 optimized_combo.sh：
#!/bin/bash
# 优化的组合测试脚本echo "=== 高效组合测试 ==="# 设置变量
URL="https://example.com"
TEST_NAME="optimized_test_$(date +%Y%m%d_%H%M%S)"
REPORT_DIR="reports/$TEST_NAME"mkdir -p "$REPORT_DIR"# 1. 快速导航（Agent Browser - 高效率）
agent-browser open "$URL" --json > "$REPORT_DIR/navigation.json"# 2. 智能等待，避免固定延时
agent-browser wait --load networkidle# 3. 获取精简快照（仅交互元素）
agent-browser snapshot -i --json > "$REPORT_DIR/snapshot.json"# 4. 执行快速操作
agent-browser fill "@e1" "test@example.com" # 使用 ref，更高效
agent-browser fill "@e2" "password123"
agent-browser click "@e3"# 5. 只在关键节点进行性能分析
#chrome-devtools start-tracing
#chrome-devtools get-performance-metrics > "$REPORT_DIR/performance.json"# 6. 验证结果（Agent Browser）
agent-browser is visible ".success-message" && echo "✅ 测试通过" || echo "❌ 测试失败"# 7. 截图保存
agent-browser screenshot "$REPORT_DIR/final_state.png"# 8. 生成简洁报告
cat > "$REPORT_DIR/report.md" << EOF
# 组合测试报告
测试时间: $(date)
测试URL: $URL## 结果
- 导航: 成功
- 表单填写: 成功
- 提交: 成功
- 截图: $REPORT_DIR/final_state.png## 性能数据
$(cat "$REPORT_DIR/performance.json" 2>/dev/null || echo "性能数据获取中...")
EOFecho "📊 报告已生成: $REPORT_DIR/report.md"
6.3 错误处理策略
创建 robust_combo.py：
#!/usr/bin/env python3
"""
健壮的组合测试 - 包含完整的错误处理
"""import asyncio
import subprocess
import json
import time
from datetime import datetimeclass RobustComboTest:def __init__(self):self.max_retries = 3self.retry_delay = 2async def safe_agent_browser_command(self, command, description=""):"""安全执行 Agent Browser 命令，带重试"""for attempt in range(self.max_retries):try:print(f"🔄 {description} (尝试 {attempt + 1}/{self.max_retries})")result = await self.run_command(f"agent-browser {command}")if result.get("returncode") == 0:print(f"✅ {description} 成功")return resultelse:print(f"⚠️ {description} 失败: {result.get('stderr', '')}")except Exception as e:print(f"❌ {description} 异常: {e}")if attempt < self.max_retries - 1:print(f"⏳ 等待 {self.retry_delay} 秒后重试...")await asyncio.sleep(self.retry_delay)raise Exception(f"{description} 在 {self.max_retries} 次尝试后仍然失败")async def safe_chrome_devtools_command(self, command, description=""):"""安全执行 Chrome Dev Tools 命令，带重试"""for attempt in range(self.max_retries):try:print(f"🔧 {description} (尝试 {attempt + 1}/{self.max_retries})")result = await self.run_command(f"chrome-devtools-mcp {command}")if result.get("returncode") == 0:print(f"✅ {description} 成功")return resultelse:print(f"⚠️ {description} 失败: {result.get('stderr', '')}")except Exception as e:print(f"❌ {description} 异常: {e}")if attempt < self.max_retries - 1:print(f"⏳ 等待 {self.retry_delay} 秒后重试...")await asyncio.sleep(self.retry_delay)# Chrome Dev Tools 失败时返回警告但不中断流程print(f"⚠️ {description} 失败，继续执行...")return {"stdout": "Chrome Dev Tools 命令失败", "stderr": "", "returncode": 1}async def run_command(self, command):"""运行 shell 命令"""process = await asyncio.create_subprocess_shell(command,stdout=asyncio.subprocess.PIPE,stderr=asyncio.subprocess.PIPE)stdout, stderr = await process.communicate()return {"stdout": stdout.decode().strip(),"stderr": stderr.decode().strip(),"returncode": process.returncode}async def comprehensive_test(self, url="https://example.com"):"""综合测试，包含完整的错误处理"""print(f"🚀 开始健壮的组合测试: {url}")try:# 1. 导航到页面（Agent Browser）await self.safe_agent_browser_command(f"open {url}", "导航到页面")# 2. 等待页面加载await self.safe_agent_browser_command("wait --load networkidle", "等待页面加载")# 3. 获取页面快照snapshot_result = await self.safe_agent_browser_command("snapshot -i --json", "获取页面快照")# 4. 性能分析（Chrome Dev Tools）- 失败不中断主流程try:await self.safe_chrome_devtools_command("start-tracing", "开始性能追踪")await self.safe_chrome_devtools_command("get-performance-metrics", "获取性能指标")except Exception as e:print(f"⚠️ 性能分析跳过: {e}")# 5. 执行表单操作elements = json.loads(snapshot_result["stdout"])if elements.get("refs"):# 智能识别表单元素for ref, element in elements["refs"].items():if element.get("role") == "textbox" and "email" in element.get("name", "").lower():await self.safe_agent_browser_command(f'fill "@{ref}" "test@example.com"', "填写邮箱")elif element.get("role") == "textbox" and "password" in element.get("name", "").lower():await self.safe_agent_browser_command(f'fill "@{ref}" "password123"', "填写密码")elif element.get("role") == "button" and "login" in element.get("name", "").lower():await self.safe_agent_browser_command(f'click "@{ref}"', "点击登录")# 6. 网络分析（可选）try:await self.safe_chrome_devtools_command("get-network-requests", "获取网络请求")except:pass# 7. 验证结果await self.safe_agent_browser_command("is visible .success-message", "验证登录成功")# 8. 截图保存timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")await self.safe_agent_browser_command(f"screenshot robust_test_{timestamp}.png", "保存截图")print(f"✅ 健壮测试完成: robust_test_{timestamp}.png")except Exception as e:print(f"❌ 测试失败: {e}")# 保存错误信息with open(f"error_log_{datetime.now().strftime('%Y%m%d_%H%M%S')}.txt", "w") as f:f.write(f"Error: {e}\n")f.write(f"Time: {datetime.now()}\n")async def main():robust_test = RobustComboTest()await roboust_test.comprehensive_test("https://example.com")if __name__ == "__main__":asyncio.run(main())
七、实战项目：完整的电商网站测试
7.1 项目结构
ecommerce-combo-test/
├── src/
│ ├── combo_runner.py # 组合测试运行器
│ ├── performance_analyzer.py # 性能分析器
│ └── report_generator.py # 报告生成器
├── tests/
│ ├── test_login.py # 登录测试
│ ├── test_browse.py # 浏览测试
│ └── test_checkout.py # 结账测试
├── prompts/
│ ├── performance.md # 性能测试提示词
│ └── functional.md # 功能测试提示词
└── run_all_tests.py # 主运行文件
7.2 主运行文件
run_all_tests.py：
#!/usr/bin/env python3
"""
电商网站组合测试主程序
"""import asyncio
import json
from datetime import datetime
from src.combo_runner import ComboRunner
from src.report_generator import ReportGeneratorasync def main():"""运行完整的测试套件"""print("🚀 启动电商网站组合测试套件")print("=" * 50)# 配置测试参数config = {"base_url": "https://shop.example.com","test_users": [{"email": "test1@example.com", "password": "pass123"},{"email": "test2@example.com", "password": "pass123"}],"test_products": ["iPhone 15", "MacBook Pro", "AirPods"],"performance_thresholds": {"lcp": 2500, # Largest Contentful Paint (ms)"fid": 100, # First Input Delay (ms)"cls": 0.1 # Cumulative Layout Shift}}# 初始化测试运行器runner = ComboRunner(config)# 运行测试套件start_time = datetime.now()results = await runner.run_full_test_suite()end_time = datetime.now()duration = (end_time - start_time).total_seconds()# 生成报告report_gen = ReportGenerator()report = await report_gen.generate_comprehensive_report(results, duration)# 保存报告report_file = f"test_report_{end_time.strftime('%Y%m%d_%H%M%S')}.html"with open(report_file, 'w', encoding='utf-8') as f:f.write(report)print(f"\n✅ 测试完成！")print(f"📊 报告已保存: {report_file}")print(f"⏱️ 总耗时: {duration:.2f} 秒")# 输出简要统计stats = results.get("statistics", {})print(f"\n📈 测试统计:")print(f" - 总测试用例: {stats.get('total', 0)}")print(f" - 通过: {stats.get('passed', 0)}")print(f" - 失败: {stats.get('failed', 0)}")print(f" - 平均性能得分: {stats.get('avg_performance_score', 0):.1f}")if __name__ == "__main__":asyncio.run(main())
八、总结与最佳实践
8.1 关键优势
- Token 效率提升 90%+ 相比纯 Playwright MCP
- 功能互补：快速操作 + 深度分析
- 成本可控：智能切换，避免不必要的消耗
- 错误健壮：完整的异常处理机制
8.2 使用建议
- 开发阶段：Agent Browser 为主，快速迭代
- 调试阶段：Chrome Dev Tools 深度分析
- 生产阶段：组合使用，全面覆盖
8.3 下一步学习
- 探索更多组合模式
- 集成 CI/CD 流程
- 开发自定义报告模板
通过本教程，你应该已经掌握了 Agent Browser + Chrome Dev Tools 的组合使用技巧。这种组合方式既能保证测试效率，又能提供深度的分析能力，是现代自动化测试的最佳实践！