14. Browser & Computer Use:让 Agent 看屏幕、点鼠标

Code Execution 让 Agent 能处理结构化的数据,但现实世界的大部分业务流程是点网页按钮、填表单、抓数据这种 GUI 操作——那种你至今还必须人肉去做的事:订机票、提交表单、抓同行数据、批量整理网盘。

让 Agent 做这些,本质上是让 LLM 驱动一个浏览器或整个桌面。2024~2026 年这方面动作很多:Claude 的 Computer Use、OpenAI 的 Operator、开源的 Browser Use 和 Agent-E,以及大量创业公司。这一篇讲清楚两种主流范式、各家方案怎么取舍,以及用 Playwright + TypeScript 搭一个能跑的 Browser Agent。

本篇主语言切 TypeScript——Playwright 在 TS 生态下最成熟,Claude Agent SDK 和 Browser Use 的官方案例也以 TS 为主。

两种范式:DOM 还是 Vision

让 Agent 操作浏览器,有两种根本不同的方式:

DOM-based——把页面的 HTML 结构(或其简化版本)直接给模型,模型选元素,浏览器执行。典型:Browser Use、Agent-E、LangChain 的浏览器工具。

Vision-based——截图 + 让模型看图,告诉它"点屏幕 (x=540, y=320) 的按钮"。典型:Claude Computer Use、OpenAI Operator 的 CUA 模型。

两种范式各有明显优劣:

DOM 优势:精确、token 便宜(HTML 文本比截图的 tokens 少)、对动态内容稳定 DOM 短板:无法处理 canvas / 图片渲染的 UI、Shadow DOM 里的内容、复杂 SPA 经常拿不到完整 DOM

Vision 优势:能看到所有视觉呈现的东西、不依赖页面结构、和人一样"看见" Vision 短板:token 昂贵(每张截图 1K~5K tokens)、坐标定位不稳、对小元素和密集 UI 容易失败

实务上DOM 适合网页自动化、Vision 适合桌面应用或复杂视觉 UI。2026 年主流方向是两者结合——先用 DOM 定位可定位的,DOM 失效时切到 Vision。

Browser Use:DOM 派的代表

Browser Use(browser-use/browser-use)是目前开源 Browser Agent 里最活跃的项目之一。它的核心做法:

1. 用 Playwright 启动浏览器
2. 扫描当前页面,提取所有可交互元素(button、input、link 等)
3. 给每个元素编号,生成一份"可交互元素清单":

[1] <button> "登录"
[2] <input type="text"> placeholder="邮箱"
[3] <input type="password"> placeholder="密码"
[4] <a> "忘记密码"

4. 把这份清单 + 页面截图(可选)喂给模型
5. 模型输出"点击 [1]" 或 "在 [2] 填入 [email protected]",系统执行

这种"元素索引"的设计非常聪明——模型不需要理解完整 DOM,只需要在几十个编号里选一个。token 消耗大幅下降,定位精度大幅上升。

// Browser Use 风格的伪代码
import { chromium } from "playwright";
import OpenAI from "openai";

const openai = new OpenAI();

async function getInteractables(page) {
  return await page.evaluate(() => {
    const nodes = document.querySelectorAll("button, input, a, [role=button]");
    return Array.from(nodes).map((n, i) => ({
      id: i,
      tag: n.tagName.toLowerCase(),
      text: n.innerText || n.getAttribute("placeholder") || "",
      visible: n.offsetParent !== null,
    })).filter(e => e.visible);
  });
}

async function step(page, task: string, history: string[]) {
  const elements = await getInteractables(page);
  const elementsStr = elements.map(e => `[${e.id}] <${e.tag}> "${e.text}"`).join("\n");

  const resp = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      { role: "system", content: `你正在操作浏览器完成任务。给出下一步动作。
输出 JSON: {"action": "click"|"fill"|"done", "id": number, "value": string?}` },
      { role: "user", content: `任务: ${task}
已做过: ${history.join(", ")}
当前页面: ${await page.title()}
可交互元素:
${elementsStr}` },
    ],
    response_format: { type: "json_object" },
  });
  return JSON.parse(resp.choices[0].message.content!);
}

async function runBrowserAgent(task: string, startUrl: string) {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(startUrl);

  const history: string[] = [];
  for (let i = 0; i < 20; i++) {
    const action = await step(page, task, history);
    if (action.action === "done") break;

    const elements = await getInteractables(page);
    const target = elements[action.id];

    if (action.action === "click") {
      await page.locator(`${target.tag}:has-text("${target.text}")`).first().click();
      history.push(`点击了 "${target.text}"`);
    } else if (action.action === "fill") {
      await page.locator(target.tag).nth(target.id).fill(action.value!);
      history.push(`在 "${target.text}" 填入 "${action.value}"`);
    }
    await page.waitForLoadState("networkidle");
  }

  await browser.close();
}

runBrowserAgent("去 Hacker News 前 10 条帖子把标题抓回来", "https://news.ycombinator.com");

这段省略了很多细节(元素定位的稳定性处理、动作失败重试、超时等),但核心循环就是这样。一个实用的开源实现(比如 Browser Use)主要是把这些细节做扎实。

Claude Computer Use:Vision 派

Anthropic 2024 年底发布的 Computer Use 走的是纯 Vision 路线——不看 DOM,只看屏幕截图。

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

async function step(screenshot: string, task: string, history: any[]) {
  return await client.messages.create({
    model: "claude-opus-4",
    max_tokens: 4096,
    tools: [{
      type: "computer_20250124",
      name: "computer",
      display_width_px: 1920,
      display_height_px: 1080,
      display_number: 1,
    }],
    messages: [
      ...history,
      { role: "user", content: [
        { type: "image", source: { type: "base64", media_type: "image/png", data: screenshot } },
        { type: "text", text: `任务: ${task}。决定下一步动作。` },
      ]},
    ],
  });
}

Claude 的 computer 工具能返回几种动作:click(x, y)、type("...")、key("Return")、screenshot()、scroll(direction)。你的代码负责把这些动作映射到真实的鼠标键盘操作(用 pyautogui、xdotool、或桌面虚拟机里的相应 API)。

Vision 模式能做 DOM 做不到的事:

• 操作 Electron 桌面应用(Slack、VSCode、Figma)
• 操作游戏或画布 UI(Figma、Photoshop、在线绘图)
• 处理"页面里有 iframe / Shadow DOM / Canvas"这类 DOM 不完整的场景

代价:慢(每步要截图、发到模型、返回坐标)、贵(每张截图大几 K token)、坐标不稳(模型偶尔会给出偏 10~20 像素的坐标,点到错误按钮)。

OpenAI Operator 和 CUA 模型

2025 年初 OpenAI 发布 Operator,专门配一个叫 CUA(Computer Using Agent)模型做 GUI 操作。CUA 专门在大量人类操作屏幕的录屏数据上做了后训练,对"看到屏幕 → 输出正确坐标"这件事特别擅长。

Operator 的特殊之处是它给了一个托管浏览器——你不用管沙箱、不用管会话持久化,直接通过 API 告诉它"帮我去订一张机票",它在 OpenAI 托管的浏览器里跑。适合面向最终用户的任务型 Agent。

CUA 也是 Vision 派的。2026 年它在 WebArena、VisualWebArena 这些 benchmark 上领先 Claude Computer Use 一段距离,但差距在缩小。

开源 vs 闭源:2026 的选型

我目前(2026 年初)的实用选型建议:

• 要做网页自动化、内部工具——Browser Use 起步,够用不麻烦
• 要做桌面应用自动化——Claude Computer Use
• 要做面向最终用户的 Task Agent——先看 OpenAI Operator 能不能满足
• 要做最灵活可控的 Agent——Agent-E 或自己基于 Playwright + CUA 模型搭

这代 Browser Agent 的真实水平

说实话,2026 年的 Browser Agent 还没有真正"生产可靠"。关键指标:

• 简单任务(登录、填表单、搜索)成功率 85~95%
• 中等任务(多步导航、需要等待、有弹窗)成功率 60~75%
• 复杂任务(多网站、需要判断异常、涉及金钱)成功率 30~50%

这个成功率意味着什么?足以用于"辅助人类"——Agent 先做 80%,人类审核和纠正最后 20%。不足以"完全自主"——不能让 Agent 无人监督地帮用户订机票。

几个真实失败模式:

• 弹出 Cookie 同意、popup。大部分成熟 Agent 会先扫一遍关掉,但偶尔漏
• 新开标签。点了 "下载报告",网站在新标签打开。Agent 可能继续在旧标签操作
• 验证码。Captcha 基本让纯自动化停摆。实务里要么预先绕过,要么 handoff 给人
• 时间感。Agent 经常误以为"点了就应该有响应",不会等到页面加载完

前三个可以在 system prompt 和工具设计里做专项处理,第四个需要结构上的 wait_for_idle 机制——每次动作后强制等待网络空闲。

一个生产级的设计原则:有护栏的 Agent 胜过全自主 Agent

这代 Browser Agent 做生产的核心原则是加护栏,不追求全自主:

• 白名单域名。Agent 只能访问预先允许的网站
• 只读起步。先做"抓信息",确认稳定再放"提交"类操作
• 金额/数据检查点。任何涉及提交订单、支付、删除数据,必须 handoff 给人类确认
• 明确的终止条件。超过 30 步、超过 5 分钟必须停止
• 可观测的 trace。每一步截图留存,失败时能审查

这套护栏加完,你就有一个95% 时间自动、5% 时间回退到人的 Agent。这是当前技术下最现实的生产路径。

小结

Browser Agent 是 Agent 最受关注但也最脆弱的前沿。两种范式(DOM / Vision)各有长处,2026 年主流是 DOM 为主、Vision 补位。不论哪种,都还达不到"无人监督"的可靠性,但已经足够在"人工协作"的模式下提升效率几倍。

下一篇讲这件事的一个关键配套——Human-in-the-Loop。Agent 不可能 100% 可靠,那么"什么时候该停下来问人"就是决定生产可用性的核心设计。

相关阅读

• Browser Use GitHub
• Anthropic Computer Use Docs
• OpenAI CUA Blog
• WebArena Benchmark — Browser Agent 的主流评测
• Agent-E GitHub — DOM+Vision 混合方案