Appearance
57. 如何开发浏览器自动化 Agent？
难度 P0 必背 · 岗位 应用 · 频率 ★★★ · 预计阅读 5 min
👔面试官：如何开发浏览器自动化 Agent？
🙋♂️我：用 Playwright/Selenium 控制浏览器。
👔面试官：对，但要更系统：页面感知（DOM、截图）、决策（下一步操作）、执行（调用工具）、校验（确认生效）、治理（超时、重试、幂等）。最大难点不是"点按钮"，是网页不稳定、异步加载、误操作成本高。你能展开吗？
TL;DR 速记
- 是什么：浏览器自动化 Agent 是「页面感知 → 决策 → 执行 → 校验 → 治理」的闭环系统。
- 关键点：难点不是点按钮，而是网页不稳定、异步加载、状态漂移和误操作成本高。
- 怎么答：每步都要先感知、再执行、后校验，失败能重试、回滚或转人工。
图解
浏览器 Agent 执行闭环
💡 简要回答
五层设计：
| 层级 | 职责 |
|---|---|
| 页面感知 | 拿到 DOM、截图、可交互元素 |
| 决策 | 根据目标决定点击、输入、滚动、等待、回退 |
| 执行 | 调用浏览器自动化工具完成动作 |
| 校验 | 确认动作生效，页面进入预期状态 |
| 治理 | 超时、重试、幂等、防误操作、日志回放 |
核心难点：网页不稳定、异步加载、状态漂移、误操作成本高。必须把验证和回滚做进去。
常见踩坑与反例
- 踩坑 1：只说 Playwright/Selenium。框架只是执行层；面试要讲页面感知、决策、校验和治理闭环。
- 踩坑 2：执行后不校验。点击成功不等于业务成功；要验证 URL、DOM、提示文案、数据状态或截图变化。
- 踩坑 3：忽略异步加载。页面还没稳定就操作会导致误点；要有等待策略、重试和状态检测。
- 踩坑 4：误操作无保护。支付、删除、提交等高风险动作应有人审、二次确认或幂等保护。
- 踩坑 5：定位策略脆弱。只靠坐标或易变 CSS Selector 不稳，应优先用语义、可访问性属性和候选元素校验。
面试官可能继续追问
- 追问 1：页面感知输入有哪些？ DOM、可访问性树、截图、OCR、网络请求和当前浏览器状态。
- 追问 2：怎么降低误点风险？ 操作前做元素确认，操作后做状态校验，高风险步骤加人工确认。
- 追问 3：遇到验证码或登录态怎么办？ 不绕过安全机制，使用合规登录、人工接管或预授权会话。
- 追问 4：如何做回放和调试？ 保存动作轨迹、截图、DOM 快照、网络日志和工具返回，支持复盘。
📝 详细解析
页面感知的两种路径
DOM/可访问性树：结构化表示页面元素，适合有清晰 HTML 结构的页面。提取可交互元素列表（按钮、输入框、链接），生成简化的「行动空间」给模型决策。
截图 + 视觉模型：直接截图，用多模态模型（GPT-4o、Claude 3.5）「看」页面。优点：适用于任何页面（包括 Canvas 渲染的应用）；缺点：成本高、坐标精度有限。
实际系统通常结合两者：DOM 解析 + 截图辅助验证。
元素定位的稳健策略
python
# 脆弱的定位（易失效）
page.click("div.btn-primary > span:nth-child(2)")
# 稳健的定位（语义化）
page.get_by_role("button", name="提交订单").click()
page.get_by_label("用户名").fill("admin")
page.get_by_text("确认支付").click()优先用语义属性（role、aria-label、文本内容），而不是 CSS 选择器或坐标（页面更新后极易失效）。
执行校验的实现
每次操作后需要验证「动作真的生效了」：
python
# 点击"添加到购物车"后
await page.click("button[data-action='add-to-cart']")
# 校验：等待购物车数量变化
await page.wait_for_selector(".cart-count:text-matches('[1-9]')")
# 或截图对比
screenshot_after = await page.screenshot()
assert cart_count_changed(screenshot_before, screenshot_after)高风险操作的保护机制
支付、删除、提交表单等操作失败成本高，需要：
- 执行前展示计划：「我将点击「确认支付」按钮，金额 ¥299，是否继续？」
- 幂等设计：操作前检查是否已经执行过（避免重复下单）
- 截图留证：高风险操作前后各截一张图，留存日志
🎯 面试总结
五层闭环，验证和回滚是关键。浏览器自动化难在不稳定性和高误操作成本。