Browser Agent 与 Computer Use
这个主题是前端工程师非常有优势的方向：让 AI 理解和操作界面。
Browser Agent 的本质是把网页变成可观察、可操作、可验证的环境。前端工程师熟悉 DOM、可访问性树、表单状态、浏览器事件和自动化测试，因此能更准确地设计 Agent 的观察方式和操作边界。
学习目标
完成这个主题后，你应该能够：
- 解释 Browser Agent、Computer Use、Playwright 自动化和普通爬虫之间的区别。
- 使用 DOM、accessibility tree、screenshot 和 network 信息构建页面观察结果。
- 设计 observe、act、verify、recover 的浏览器 Agent 循环。
- 处理选择器不稳定、弹窗、登录态、页面跳转、异步加载和失败重试。
- 实现网页信息提取、表单填写和执行过程回放。
关键概念
Browser Agent 是能在浏览器里观察页面、理解任务、执行点击输入等动作，并检查结果是否达成的 AI 系统。
Computer Use 更通用，它基于屏幕图像、坐标和系统输入操作桌面应用。能力边界更宽，但可控性和可验证性通常比 DOM 自动化更难。
Accessibility Tree 是 Browser Agent 的重要观察来源。它比原始 DOM 更接近用户可感知的界面语义，例如 button、textbox、link 和 label。
Visual Grounding 用截图理解页面位置和视觉状态，适合处理 canvas、复杂布局或缺少语义标记的页面，但坐标操作需要更严格的验证。
Execution Replay 记录每一步观察、动作、结果和截图，让用户能理解 Agent 做了什么，也方便调试失败。
Browser Agent observe-act-verify
这张图强调 Browser Agent 不能只会“点”。每次行动后都要验证页面状态，并在不确定或高风险操作前请求用户确认。
核心主题
- Browser Agent：AI 操作浏览器、理解网页、执行 Web 任务。
- Computer Use：AI 读取屏幕、点击界面、输入文本、操作应用。
- 与前端的关系：DOM、UI state、browser automation、accessibility tree、screenshot、Web interaction。
- Browser Automation：Playwright、Puppeteer、browser context、page、selector、action。
- DOM Understanding：DOM tree、accessibility tree、semantic HTML、form、button、link。
- Screenshot Understanding：visual grounding、coordinate、element localization。
- Web Agent 架构：observe page、plan action、execute action、verify result、recover error。
- 难点：页面变化、弹窗、登录态、验证码、反爬、选择器不稳定、视觉误判。
- Computer Use UX：执行过程展示、用户确认、中断、回放、审计日志。
阶段实践拆解
- 实现页面观察器：收集 URL、title、可交互元素、表单字段、正文摘要和截图。
- 实现信息提取 Agent：根据用户目标打开页面、定位内容、抽取结构化结果并附来源。
- 实现表单填写 Agent：从任务描述生成字段映射，填写前展示预览，高风险提交前确认。
- 接入 Playwright 动作层：封装 navigate、click、fill、select、extract、screenshot 和 wait。
- 加入验证步骤：每次动作后检查 URL、元素状态、成功提示、表单值或抽取结果。
- 增加失败恢复：选择器失效时重新观察页面，弹窗出现时请求用户处理，循环次数超限时停止。
- 实现执行回放：保存每步 observation、action、screenshot、tool result 和 final result。
阶段实践
- 实现一个网页信息提取 Agent。
- 实现一个表单填写 Agent。
- 实现一个 Playwright + LLM 的 Browser Agent Demo。
计划文章
- Browser Agent 为什么是前端工程师的新机会
- AI 如何理解和操作网页
- 从 Playwright 到 Browser Agent