📌 一句话摘要

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

📝 详细摘要

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

💡 主要观点

1. AI Agent 必须感知浏览器中的实际渲染结果，而非仅依赖静态代码。 Web 界面的正确性是代码、样式、数据、容器尺寸等运行时组合的结果，静态分析无法保证。Agent 需要像人类开发者一样，通过浏览器验证来确保交付质量。
2. 基于 CDP 构建的六维度验证体系是核心能力。 通过 Chrome DevTools Protocol，Agent 可以从路径、内容、视觉、交互、控制台和网络六个维度对页面进行验证，覆盖了 Web 产品「能不能用」的几乎所有问题。
3. Contract 模式是高效验证的关键，避免 Agent 漫无目的地消耗 Token。 使用结构化的 JSON 定义「要测什么」，Agent 按照用例逐条执行，并通过渐进式笔记记录失败经验和时序信息，大幅提升后续操作的效率和准确性。
4. 视觉与 DOM 操作的平衡是成本优化的核心。 截图成本高但适合布局验证，DOM 操作成本低但适合精确属性读取。最佳实践是在两者间取得平衡，并辅以带边框截图、VET 覆盖层等辅助手段提升检出能力。

💬 文章金句

• 代码正确不等于界面正确。编译、构建、类型检查只能证明代码没有明显工程错误，却无法证明用户打开页面后看到的内容不是空白、控制台是否存在报错、交互效果符合预期。
• 只有网页内容才是唯一信源，代码只是参考。
• Agent 天然倾向于通过读代码来判断正确性。它看到组件的 width 写了 330px，就认为宽度是 330px。但实际渲染受父容器 max-width、box-sizing、padding、flex-shrink 等因素影响，最终的计算值可能完全不同。
• 未来 Agent 交付的不应该只是一个 diff，而是「我写了代码，打开了页面，走通了路径，验证了内容，检查了交互，确认了视觉，没有发现关键异常，并留下了可复用的验证证据」。

📊 文章信息

阅读完整文章