Written with AI assistance from the source video. The video is the authority.
7:49AI LABS
Log in to leave a comment
No posts yet
浏览器自动化是现代开发的必备要素，但当 AI 智能体（Agent）介入时，情况会变得复杂。任何使用过现有 Playwright 或 Puppeteer MCP（模型上下文协议）的开发者都经历过：臃肿的上下文、混乱的文件夹结构，以及在关键时刻停滞不前的低任务完成率，这些都在挑战开发者的耐心。
核心问题在于效率。传统的开源 MCP 方式为了向模型传递浏览器状态，每次初始化会话都会消耗 13,700~19,000 个 Token。这意味着原本应分配给推理的资源被浪费在了环境配置上。相比之下，Claude Code Chrome 扩展程序直接访问浏览器内部 API。由于它共享真实的物理用户会话，从源头上杜绝了“我电脑上行，AI 运行就不行”的经典调试难题。
AI 测试的成败取决于传递信息的精准度。必须剔除冗余数据，应用以下三种最大化效率的实务策略。
传统的自动化工具执着于 DOM 元素的文本。但对于像 Claude 这样拥有强大视觉能力的模型，全页截图效果更好。与其将数万行 HTML 代码序列化为文本发送，不如发送一张 500KB 左右的图片，其信息密度更高。通过这种方式，可以一次性捕获诸如元素重叠或响应式布局缺陷等视觉回归问题。
Cookie 同意横幅或新闻订阅弹窗是打断 AI 思路的元凶。不要让 AI 浪费宝贵的 Token 去关闭弹窗。应在 CLAUDE.md 文件中定义预执行脚本，强制隐藏具有 [aria-modal="true"] 或 Cookie 相关属性的元素。实际研究数据表明，仅通过这一预处理步骤，就能将测试错误率降低 25% 以上。
不要让 AI 盲目阅读整个 HTML，而应指示其精确指向特定元素。优先级如下：
[data-testid="submit-btn"] [aria-label="登录"] Chrome 的 Manifest V3 规范规定，如果闲置约 30 秒，后台 Service Worker 就会终止。这正是长耗时 E2E 测试中 AI 丢失浏览器状态的所谓**“30 秒之墙”**发生的地方。
为了解决这一问题，必须采用模块化测试设计，将庞大的场景拆分为可独立验证的小单元，而不是作为一个整体执行。创建一个类似 tasks/status.md 的独立文件来实时记录测试进度。即使会话中断，AI 也能读取该记录并立即从中断点恢复工作。此外，添加每 25 秒调用一次轻量级 API 的心跳逻辑（Heartbeat）以强制重置闲置计时器也是一种实用的技巧。
从理论走向实际环境构建时，请勿忽略以下细节：
--user-data-dir 标志创建测试专用 Chrome 配置文件。这既能防止与个人会话冲突，又能稳定维持所需的登录状态。Claude Code 与 Chrome 扩展程序的结合，标志着 AI 已从简单的观察者进化为实质性的执行者。只要减少传统 MCP 方式的开销，并通过设计规避 Manifest V3 的限制，就无需再为简单重复的手动测试耗费时间。
归根结底，成功的 AI 测试不仅是技术配置的提升，更意味着向**评估驱动开发（Evaluation Driven Development）**的体质转变。请立即在项目根目录引入优化指令，构建从根本上提升软件质量的自动化环境。