让 AI 操作浏览器：从 Playwright 到自主浏览的 Agent 实践

陈陈老师586 阅读
#Agent#浏览器自动化#Playwright

让 AI 像人一样操作浏览器，能自动化很多以前没法搞的事：填表单、抓数据、甚至测试网站。我试了两条技术路线，说下各自的实现和坑。

路线一：DOM 驱动。把页面的可交互元素（按钮、输入框）提取成文本描述，让模型决定点哪个。实现上就是 Playwright 抓取页面结构 → 喂给模型 → 模型输出"点击 #submit 按钮" → Playwright 执行。

这个方案的问题很明显：页面结构一复杂，描述就爆炸。一个电商页面几百个元素，塞给模型 token 不够用，而且很多元素对任务无意义。

路线二：视觉驱动。截个图，让多模态模型看截图决定操作。现在 GPT-4o、Qwen-VL 都能看图，这个方案更接近人眼操作。

我的实现（用 Playwright + 视觉模型）：

Python
# 1. 截图 page.screenshot(path="current.png") # 2. 模型看截图 + 当前任务，决定操作 action = vision_model(f"当前任务: {task}", image="current.png") # 3. 执行操作 if action == "click": page.click(action["target"]) elif action == "type": page.fill(action["target"], action["value"]) # 4. 循环直到任务完成

关键坑：

  1. 操作目标怎么描述。截图是像素，模型得告诉你点哪，坐标是最直接的。但页面滚动后坐标会变。我让模型输出"元素描述 + 坐标"，执行前再用 DOM 定位一次，双重保险。

  2. 循环控制。AI 可能卡在同一个操作上来回点。我加了一个"连续 3 次相同操作就换策略"的规则，加上最大步数限制，防止死循环。

  3. 验证失败要回溯。点了提交按钮但没提交成功（可能被验证码拦了），Agent 需要能感知"没成功"并换个方式。这需要每步之后校验页面状态。

  4. 速度慢。视觉驱动每步都要调一次模型，一个流程几十步，又慢又费钱。适合偶尔执行的场景，不适合高频自动化。

现在的浏览器 Agent 框架（比如 browser-use）把这些都封装好了，但原理还是这两条路线的组合。

评论0

还没有评论，来抢沙发～