浏览器智能体实战 · 第 5 章 视觉流派

浏览器智能体实战 · 第 5 章 视觉流派

章节摘要：本章讲第四种、也是「兜底性」最强的一种看页面方式：视觉定位——截图喂给多模态模型，模型给出目标元素的位置，换算成坐标点击。5.1 节讲原理：视觉定位的管道（截图、目标识别、坐标换算、点击），什么时候视觉是唯一解（Canvas 与 WebGL、图片按钮、无语义标记的自绘控件——正是第 4.1 节快照读不出的清单），以及成本对比：视觉输入的 token 成本是结构化快照的数倍，延迟同阶上升，因此工程口径是「结构化优先、视觉兜底」；Set-of-Mark 给截图编号的做法是两个流派的桥。5.2 节 Midscene 实战：字节出品的视觉驱动 UI 自动化库（约 1.5 万 stars，MIT），自然语言定位与断言三件套（ai、aiQuery、aiAssert），JS 与 Python 双语用例，在靶场上完整走一遍并解读视觉中间产物。5.3 节 Skyvern 对照：视觉与 DOM 混合的工作流自动化（约 2.3 万 stars，AGPL-3.0 许可注记），库形态与服务形态的差异表，兼带浏览器基建（Browserbase 与 steel-browser）。视觉定位的原理性论述（Grounding 与 SoM）归《深入理解 AI Agent》第 9 章。

学习目标

• 画出视觉定位管道，说出坐标换算环节的坑（缩放与视口）。
• 列出「视觉是唯一解」的页面清单，并用三表示成本对照说明「结构化优先、视觉兜底」。
• 解释 Set-of-Mark 如何桥接视觉与结构化两个流派。
• 用 Midscene 的三件套在靶场写出自然语言用例（JS 与 Python）。
• 说出 aiAssert 相对传统断言的增益与代价。
• 用定位差异表区分 Midscene 与 Skyvern，并复述 AGPL 注记的注意点。

核心概念速览

视觉定位在选型序里的位置（本章立场）

  遇到一个页面操作问题：
   ① 有语义（快照/编号可读）？ ── 是 ─▶ 结构化路线（第 1、4 章，便宜）
   ② 语义欠账但 DOM 可读？    ── 是 ─▶ act 指令路线（第 3 章，一次模型调用）
   ③ Canvas/图片/无语义？      ── 是 ─▶ 视觉路线（本章，数倍成本，唯一解）
   ④ 点完之后                ──▶ 一律验证（第 6 章）
​

一句话金句：视觉流派用像素换通用性——什么页面都能看，代价是什么都贵。

子章节导航

• 第 5.1 节《多模态定位原理》：视觉定位管道、唯一解清单、成本对比、SoM 与混合定位。
• 第 5.2 节《Midscene 实战》：三件套 API、靶场完整用例走查、JS 与 Python 双语形态、AI 增强断言与可视化报告。
• 第 5.3 节《Skyvern 对照》：视觉加 DOM 混合机制、工作流形态、与 Midscene 的定位差异表、AGPL 注记与浏览器基建。

按序读：5.1 立原理与成本观，5.2 进库级实战，5.3 换服务形态并对照收束。

子章节之间的逻辑关系

┌────────────────┐   原理落到库       ┌────────────────┐   库对照服务       ┌────────────────┐
│ 5.1 定位原理    │ ──────────────▶ │ 5.2 Midscene    │ ──────────────▶ │ 5.3 Skyvern    │
│ 管道+唯一解清单 │                 │ 三件套+双语用例   │                 │ 混合+工作流+    │
│ +成本观        │                 │ +AI 断言        │                 │ 差异表         │
└───────┬────────┘                 └───────┬────────┘                 └───────┬────────┘
        │ 产物：视觉选型观                  │ 产物：可运行视觉用例             │ 产物：形态选型表
        └──────────────────────────────────┴───────────────┬─────────────────┘
                                                          ▼
                              第 6 章 验证与重试（后半本开场：无论哪种眼睛，结果都要验）
​

前置知识与后续延伸

• 前置：第 4.1 节的三表示对照（视觉是其对照系的一极）；第 1 章三原语（Midscene 的 ai 三件套是其视觉变体）。
• 延伸阅读：《深入理解 AI Agent》第 9 章「Computer Use：GUI 自动化 Agent」一节——视觉定位（Grounding）与 Set-of-Mark 的原理阐述，本章只做工程落地。
• 后续：第 6 章为视觉动作设计验证（坐标点击的误点率更高，验证更不可省）；第 8 章讨论视觉流派的合规边界；第 9 章把 Midscene 式用例接入 E2E 测试体系。

合规声明：本节内容仅用于你有权访问的站点与授权自动化场景；请遵守目标站点的服务条款，自动化访问的速率与方式应可被站点方接受。