Browser Use：为 Agent 构建 Runtime Harness

📌 一句话摘要

本文详细介绍了如何基于 Chrome DevTools Protocol 构建一套让 AI Agent 能够操作真实浏览器进行视觉、交互、控制台等多维度验证的开源工具，从而确保 Web 产品交付质量。

📝 详细摘要

文章指出，AI Agent 在参与前端开发时，仅靠静态代码分析无法保证 Web 界面的正确性，因为许多问题（如布局溢出、异步时序、控制台报错）只能在运行时暴露。为此，作者团队开发了基于 Chrome DevTools Protocol 的开源工具，使 Agent 能够操作真实浏览器，从路径、内容、视觉、交互、控制台和网络六个维度进行验证。文章详细阐述了工具的设计思路、核心契约（只有网页内容才是唯一信源）、工作流（Contract 模式）、真实验证案例以及两种实践方案（重 QA 和快测试），并讨论了成本优化技巧。最终结论是，Runtime 验证是 Agent Harness 的重要组成部分，全托管式 Agent 开发近在眼前。

💡 主要观点

- AI Agent 必须感知浏览器中的实际渲染结果，而非仅依赖静态代码。 Web 界面的正确性是代码、样式、数据、容器尺寸等运行时组合的结果，静态分析无法保证。Agent 需要像人类开发者一样，通过浏览器验证来确保交付质量。

基于 CDP 构建的六维度验证体系是核心能力。 通过 Chrome DevTools Protocol，Agent 可以从路径、内容、视觉、交互、控制台和网络六个维度对页面进行验证，覆盖了 Web 产品「能不能用」的几乎所有问题。

Contract 模式是高效验证的关键，避免 Agent 漫无目的地消耗 Token。 使用结构化的 JSON 定义「要测什么」，Agent 按照用例逐条执行，并通过渐进式笔记记录失败经验和时序信息，大幅提升后续操作的效率和准确性。

视觉与 DOM 操作的平衡是成本优化的核心。 截图成本高但适合布局验证，DOM 操作成本低但适合精确属性读取。最佳实践是在两者间取得平衡，并辅以带边框截图、VET 覆盖层等辅助手段提升检出能力。

💬 文章金句

- 代码正确不等于界面正确。编译、构建、类型检查只能证明代码没有明显工程错误，却无法证明用户打开页面后看到的内容不是空白、控制台是否存在报错、交互效果符合预期。

• 只有网页内容才是唯一信源，代码只是参考。
• Agent 天然倾向于通过读代码来判断正确性。它看到组件的 width 写了 330px，就认为宽度是 330px。但实际渲染受父容器 max-width、box-sizing、padding、flex-shrink 等因素影响，最终的计算值可能完全不同。
• 未来 Agent 交付的不应该只是一个 diff，而是「我写了代码，打开了页面，走通了路径，验证了内容，检查了交互，确认了视觉，没有发现关键异常，并留下了可复用的验证证据」。

📊 文章信息

AI 初评：88

来源：百度Geek说

作者：百度Geek说

分类：人工智能

语言：中文

阅读时间：37 分钟

字数：9054

标签： AI Agent, Browser Use, Chrome DevTools Protocol, 前端测试, 视觉验证

阅读完整文章