想象这样一个场景：你雇了一位刚从航海学校毕业的见习水手——马林，让他帮你处理电脑上的网页任务。有趣的是，马林完全不懂电脑的“源代码”，他不知道HTML是什么，也从不翻看DOM文档。他只会像普通人一样：用眼睛看屏幕上有什么，找到按钮就点，看到输入框就打字，页面跳转了就跟进，遇到表单就填写。这位“马林”，正是Google实验室里诞生的浏览器AI Agent——Project Mariner（水手号）。 Mariner把浏览器变成了一艘由AI驾驶的船：多模态视觉模型是它的“眼睛”，动作执行系统是它的“双手”，任务编排引擎是它胸中的“航行计划书”，安全沙箱则是它的“救生衣”。本文就带你登上这艘船，从瞭望台到船舱，把这位见习水手的全部本领拆解清楚。

岗位关联

学习Project Mariner，等于理解AI Agent从“读代码”进化到“看世界”的核心范式——这是AI应用开发的前沿方向，也是未来自动化工具从业者的必备认知。

目录
  1. 可视化演示
  2. 浏览器Agent原理
  3. 视觉理解机制
  4. DOM解析方案
  5. 动作执行系统
  6. 任务编排引擎
  7. 安全防护体系
  8. 实际应用场景
  9. AI 应用场景
  10. Python 演示
  11. 常见误区
  12. 面试题

可视化演示

展示浏览器AI Agent架构（视觉理解/DOM解析/动作执行）、多步任务编排流程及安全沙箱权限隔离机制，切换模式理解Project Mariner核心技术。

本节配有交互动效（进入视口后自动加载，约 3KB）。

Project Mariner Agent架构总览 Gemini视觉语言模型理解网页截图，将像素信息转化为结构化语义理解，区别于传统DOM选择器方式 DOM解析器精确定位页面元素，结合视觉理解执行点击/输入/导航等浏览器操作 Pipeline: Screenshot → Gemini Vision → DOM Parse → Action → Browser 视觉理解+DOM解析双引擎驱动浏览器自动化

浏览器Agent原理

船长把马林叫到舰桥，交给他一张纸条：“帮我把收货单录入到采购系统里。”马林没有追问“系统接口在哪、数据结构是什么”，他径直走到电脑前，像任何一位实习员工那样：看着屏幕，找到输入框，逐项填写。这就是Agent的本质——一个能“看”、能“想”、能“动手”的智能体，把抽象目标转化为一连串具体操作。

Project Mariner正是这样的智能体，运行在真实的Chrome浏览器中。它的核心流程是一个循环：先用视觉模型观察当前页面（感知），再由大模型结合任务与观察决定下一步（决策），然后通过浏览器自动化接口执行点击、输入（行动），完成后再次观察页面状态。这个“感知-决策-行动”循环，就是Agent最底层的骨架，也是它与普通脚本的本质区别——脚本是死板的预定义流程，Agent则能依据页面反馈动态调整。

船继续航行。马林的第一个本领我们已看清：他不是按图索骥的机器人，而是一个随时观察、随时调整的“活”水手。相比传统自动化中“死记硬背每一步”的脚本，Mariner最大的不同就在于——它真的在用眼睛看网页。

π:(任务,ot)↦at\displaystyle \pi: (\text{任务}, \mathbf{o}_t) \mapsto a_t
这个公式是Mariner的“工作芯片”：策略函数 π 每次吃进“任务 + 当前看到的东西”，吐出一个待执行的动作。
  1. $\pi$（策略函数）Agent的决策大脑，相当于水手的经验法则。它不依赖固定脚本，而是根据当下情境灵活决定做什么。
    π(⋅)\displaystyle \pi(\cdot)
  2. 任务（goal）用户下达的目标指令，例如“填写这张收货单”。它是所有决策的出发点和最终校准线。
    goal=用户指令\displaystyle \text{goal} = \text{用户指令}
  3. $\mathbf{o}_t$（当前观察）第 $t$ 步时，视觉模型从浏览器截图中提取的特征向量，相当于水手此刻“眼里看到的海面全貌”。
    ot=fvis(It)\displaystyle \mathbf{o}_t = f_{\text{vis}}(\mathbf{I}_t)
  4. 映射 $\mapsto$表示“基于输入输出动作”的因果关系——先看，再动。
    (goal,ot)↦at\displaystyle (\text{goal}, \mathbf{o}_t) \mapsto a_t

视觉理解机制

马林站在桅杆瞭望台上，举起望远镜扫视海面。他注意到的不是航海图上抽象的风向符号，而是真实的浪花、礁石和远处船帆的轮廓。这种“看”和“读图”的差别，恰是Mariner视觉理解机制的精髓：它不看网页的源代码，而是直接“看”浏览器渲染出的画面。

具体来说，Mariner依赖Gemini等多模态大模型的视觉编码能力。系统首先对浏览器视口进行截图，这张截图就是感知层的唯一输入；然后，视觉编码器将像素矩阵转化为蕴含语义的高维特征向量；最后，模型在这个特征空间里识别出“这是一个输入框”“这里有个提交按钮”“这段文字是商品价格”。整个过程与人类的视觉认知路径惊人地一致——先看到整体画面，再定位具体对象，最后理解对象含义。

举一个直觉例子：当页面出现一个蓝色圆角矩形、上面写着“立即购买”时，视觉编码器生成的特征向量中会激活“按钮”“购买”“可点击”等语义维度。马林不必知道这个按钮在HTML里的标签是 <button> 还是 <a>，他只要“看见”它像一个可点的按钮就够了——这正是视觉驱动的力量。

ot=fvis(It)\displaystyle \mathbf{o}_t = f_{\text{vis}}(\mathbf{I}_t)
它描述了一次“观看”的完整链条：原始截图 $\mathbf{I}_t$ 经过视觉编码器 $f_{\text{vis}}$ 的加工，变成Agent能“理解”的观察向量 $\mathbf{o}_t$。
  1. $\mathbf{I}_t$（原始截图）第 $t$ 步时浏览器视口的像素快照，包含颜色、形状、文字、图片等全部视觉信息。
    It∈RH×W×3\displaystyle \mathbf{I}_t \in \mathbb{R}^{H \times W \times 3}
  2. $f_{\text{vis}}$（视觉编码器）多模态大模型（如Gemini）中的视觉塔部分，负责把像素“翻译”成语义特征，相当于水手的视觉神经。
    fvis:RH×W×3→Rd\displaystyle f_{\text{vis}}: \mathbb{R}^{H \times W \times 3} \to \mathbb{R}^d
  3. $\mathbf{o}_t$（观察向量）视觉编码器的输出，一个 $d$ 维向量。它浓缩了当前页面中元素的位置、类型、文字等关键信息。
    ot=fvis(It)\displaystyle \mathbf{o}_t = f_{\text{vis}}(\mathbf{I}_t)

DOM解析方案

以前的老水手航行时，依赖一册厚厚的航海图集。每张图精确标注了港口、暗礁、水深——这就是传统自动化工具的“DOM解析方案”。浏览器会把网页结构解析成一棵DOM树，树的每个节点都带着标签名、类名、属性、层级关系，自动化工具沿着这棵树就能找到想要的元素。听起来很精确，但航海图有个致命问题：它可能过时了。

前端工程师修改一个class名、调整一层div嵌套、把内容改成动态渲染、甚至整个页面用Canvas绘制——DOM树的结构瞬间变化，依赖它的脚本立刻失效。而视觉理解方案没有这个困扰：无论底层HTML怎么改，只要用户看到的界面没变，“蓝色按钮在右下角”这个视觉事实就不变。Mariner的团队在真实评测中发现，视觉方案对页面改版的鲁棒性远高于传统DOM解析，这正是它敢在真实浏览器里跑任务的原因。

当然，这不是说DOM方案一无是处。Mariner的实际架构中，视觉模型负责理解用户可见的界面，而轻量级的DOM信息作为辅助特征帮助模型确认元素的可交互性。未来更成熟的方案大概率是“视力 + 触觉”双通道：用眼睛看图，用手指确认触点。

Dtree={e1,e2,…,en}⟷ot=fvis(It)\displaystyle \mathcal{D}_{\text{tree}} = \{ e_1, e_2, \ldots, e_n \} \quad \longleftrightarrow \quad \mathbf{o}_t = f_{\text{vis}}(\mathbf{I}_t)
左边是DOM树——一串精确但脆弱的节点清单；右边是视觉观察——一个模糊但稳健的整体印象。Mariner选择信赖后者，同时也在探索两者融合的混合方案。
  1. $\mathcal{D}_{\text{tree}}$（DOM树）由 $n$ 个元素节点 $e_i$ 组成的树状结构，每个节点记录标签、属性和父子关系。
    Dtree={e1,e2,…,en}\displaystyle \mathcal{D}_{\text{tree}} = \{ e_1, e_2, \ldots, e_n \}
  2. $e_i$（元素节点）如 <div>、<button>、<input> 等标签的实例，带有id、class、style等属性。
    ei=(tag,attrs,children)\displaystyle e_i = (\text{tag}, \text{attrs}, \text{children})
  3. 双向箭头 $\longleftrightarrow$表示两种认知方式的对比——精确的符号系统 vs 整体的视觉系统。
    DOM解析:找节点vs.视觉理解:看画面\displaystyle \text{DOM解析}: \text{找节点} \quad \text{vs.} \quad \text{视觉理解}: \text{看画面}

动作执行系统

马林的手被训练得非常灵巧——握舵、拉帆绳、在本子上记录、用望远镜观察。对应到浏览器世界，Mariner也有一套精简而高效的动作系统。它定义了一个“动作空间”，包括点击（click）、输入文字（type）、滚动页面（scroll）、导航跳转（navigate）、等待加载（wait）等原子操作。每个动作就像水手的一项基本功，单个看都很简单，组合起来却能完成任何网页任务。

动作执行的关键在于“精准”二字。视觉模型输出的是元素的语义坐标（比如“页面中央偏左那个蓝色按钮”），动作执行层需要将其转换成真实的浏览器事件，包括计算像素坐标、模拟鼠标移动轨迹、触发正确的鼠标事件序列等。此外，系统还支持动作序列——一次决策可以输出“点击搜索框 → 输入关键词 → 按下回车”这样连续的多个动作，减少模型与浏览器之间的往返延迟。

动作执行后，系统会等待页面响应（如网络请求完成、DOM更新），再回到视觉理解环节确认页面是否变化。这个“动作-反馈-再观察”的闭环，保证了马林不会在页面还没加载完时就贸然进行下一步操作。

A={aclick,atype,ascroll,anav,await}\displaystyle \mathcal{A} = \{ a_{\text{click}}, a_{\text{type}}, a_{\text{scroll}}, a_{\text{nav}}, a_{\text{wait}} \}
动作空间定义了Agent的全部“肢体语言”：能点什么、能打什么字、能往哪走，全在这五个动作里。
  1. $\mathcal{A}$（动作空间）Agent所有可能执行动作的集合，是整个系统的“操作面板”。
    A={a1,a2,…,am}\displaystyle \mathcal{A} = \{ a_1, a_2, \ldots, a_m \}
  2. $a_{\text{click}}$（点击）在页面某坐标上触发鼠标点击，用于按下按钮、勾选选项、展开菜单。
    aclick=(坐标,点击类型)\displaystyle a_{\text{click}} = (\text{坐标}, \text{点击类型})
  3. $a_{\text{type}}$（输入）向聚焦的输入框填入文本，是表单填写、搜索查询的主要手段。
    atype=(输入框,文本内容)\displaystyle a_{\text{type}} = (\text{输入框}, \text{文本内容})
  4. $a_{\text{nav}}$（导航）跳转到新URL或操作浏览器前进后退。
    anav=(URL)\displaystyle a_{\text{nav}} = (URL)

任务编排引擎

出海远航不能走一步看一步。马林在出发前，会在航海日志上写出完整航线：起锚 → 出港 → 调整主帆 → 绕过暗礁区 → 日落前抵达中转港。同理，Mariner执行真实任务时，也需要一个“任务编排引擎”把宏大目标分解成有序步骤。

当用户下达“在购物网站上买一箱牛奶”的指令时，编排引擎会将其拆解为：打开购物网站 → 在搜索框输入“牛奶” → 点击搜索按钮 → 从结果中筛选合适的商品 → 加入购物车 → 进入结算页 → 等待用户确认支付。每一步的输出都是下一步的输入，整个任务形成一个有向无环的执行链。关键在于，这个分解不是一次性生成后死板执行，而是每一步执行后都结合最新的页面状态重新评估——如果商品缺货，就自动搜索替代品；如果弹出了登录窗口，就优先完成登录。

任务编排还有一个容易被忽视的能力：完成判断。系统需要识别任务是否真正完成——比如支付成功页面的出现、提交后显示的“感谢”文案、列表页面的数据全部抓取完毕。这依赖于视觉模型对页面语义的理解，也是衡量Agent成熟度的关键指标。

T={s1,s2,…,sn},at=π(任务,ht)\displaystyle \mathcal{T} = \{ s_1, s_2, \ldots, s_n \}, \quad a_t = \pi(\text{任务}, h_t)
左边是把任务切成一串子步骤；右边说明每一步动作都要带着“历史记忆” $h_t$ 来做决策——马林记得自己已经走到航线的哪一段。
  1. $\mathcal{T}$（任务计划）将用户目标拆解得到的子步骤序列 $\{s_1, s_2, \ldots, s_n\}$，每步对应一个子目标。
    T=分解(目标)\displaystyle \mathcal{T} = \text{分解}(\text{目标})
  2. $h_t$（历史记忆）截至第 $t$ 步为止的所有观察与动作记录，让Agent知道“我从哪里来、做过什么”。
    ht=(o1,a1,o2,a2,…,at−1,ot)\displaystyle h_t = (\mathbf{o}_1, a_1, \mathbf{o}_2, a_2, \ldots, a_{t-1}, \mathbf{o}_t)
  3. 整合决策当前动作由任务、历史记忆共同决定，而不是只看当前一屏。
    at=π(任务,ht)\displaystyle a_t = \pi(\text{任务}, h_t)

安全防护体系

真正的远洋货轮从不只靠一名水手。甲板上有安全绳、船舷边有救生圈、驾驶舱里有瞭望员，关键操作必须由船长亲自确认。Mariner同样被包在一层厚厚的“安全防护服”里，毕竟它操纵的是真实浏览器，可能接触到你的购物车、邮箱和银行账户。

Mariner的防护体系分三层：第一层是安全沙箱，Agent的所有操作都被限制在一个隔离的浏览器环境中，无法直接读取用户的浏览历史、密码等敏感数据；第二层是用户确认机制，涉及支付、登录、删除等高风险操作时，Agent会暂停下来，把当前页面的截图和拟执行的动作呈现给用户，等到点击“确认”后才继续；第三层是权限控制，用户可以为每个任务设置允许的操作范围，例如“只能访问这一个网站，不能打开新标签页”。

隐私保护同样重要：Mariner在云端的计算过程中，会过滤掉页面中的敏感个人信息，避免用户数据被发送到模型服务端。马林虽然能干，但船员守则第一条永远是——安全第一。

Pexec={1,若用户已确认0,若用户未确认\displaystyle P_{\text{exec}} = \begin{cases} 1, & \text{若用户已确认} \\ 0, & \text{若用户未确认} \end{cases}
这是一道“闸门”：遇到敏感动作，Agent必须停下来等待用户点头。安全性不是附加功能，而是架构的一部分。
  1. $P_{\text{exec}}$（动作放行概率）表示一个动作是否被允许执行，取值为1（放行）或0（阻止）。
    Pexec∈{0,1}\displaystyle P_{\text{exec}} \in \{0, 1\}
  2. 条件判断放行的条件是“用户已确认”。未确认一律不放行，宁可少做，不可错做。
    Pexec=1  ⟺  用户已确认\displaystyle P_{\text{exec}} = 1 \iff \text{用户已确认}
  3. 策略意义把最终决定权交给人类，确保AI失控时有人能踩下刹车。
    高风险动作→等待用户确认→执行\displaystyle \text{高风险动作} \to \text{等待用户确认} \to \text{执行}

实际应用场景

马林经过几个月的见习，终于开始执行日常任务了。每天早晨，他先帮船长填写航海日志（把表格的每个字段都填得整整齐齐），然后去贸易站采集当天的货物报价单（一页页翻过，把价格和库存抄录下来），最后去港口商店购买补给（把清单上的物品加入购物车，等待船长确认付款）。这些看似鸡毛蒜皮的工作，恰恰是Mariner最擅长的场景。

在表单填写场景中，Mariner可以通过视觉理解自动识别姓名、电话、地址等字段，并调用用户的资料库自动填入，把原本需要3分钟的手工操作压缩到10秒。在数据采集场景中，它能遍历多页搜索结果，从内容接近的列表中提取所需字段，整理成结构化数据。在在线购物场景中，它甚至能跨多个电商平台比价，把最划算的商品汇总展示。这些能力的共同特征是：低风险、多步骤、强重复——计算机擅长而人类厌倦的工作。

展望未来，Mariner还会从“单任务执行”走向“多任务自主”——水手终将成为大副。也许某一天，它不只是帮你操作浏览器，而是协同多个Agent完成“订机票+安排酒店+规划行程”这样横跨多个系统的复杂项目。那一天的引擎，今天已经点火了。

SuccessRate=NsuccessNtotal×100%\displaystyle \text{SuccessRate} = \frac{N_{\text{success}}}{N_{\text{total}}} \times 100\%
衡量马林干得好不好，就看任务成功率——完成了多少个步骤除以总共有多少步骤。这也是Agent能力评测的通用指标。
  1. $N_{\text{total}}$（总步骤数）任务计划中所有子步骤的总数，如“填写表单”包含识别、输入、提交三个步骤。
    Ntotal=∣T∣\displaystyle N_{\text{total}} = |\mathcal{T}|
  2. $N_{\text{success}}$（成功步骤数）执行后页面反馈符合预期的步骤数量。
    Nsuccess=∑i=1nI(步骤i成功)\displaystyle N_{\text{success}} = \sum_{i=1}^{n} \mathbb{I}(\text{步骤}_i \text{成功})
  3. 比值与百分化两个数的比值乘以100%，得到直观的成功率。
    NsuccessNtotal×100%\displaystyle \frac{N_{\text{success}}}{N_{\text{total}}} \times 100\%

AI 应用场景

发票信息自动录入

阶段：任务编排 + 动作执行

解决的问题：财务部门每天要处理大量纸质发票，传统做法是人工逐张录入，既慢又容易出错。Mariner类Agent可以打开发票管理系统，将扫描件或电子发票图片中的信息自动填入对应字段，并在提交前暂停等待会计确认。

具体案例：一家中型企业的财务助理小李，每月要录入200多张增值税发票。部署浏览器Agent后，系统自动识别每张发票的代码、号码、金额、日期，填入ERP系统的表单并人工复核。录入时间从每周15小时压缩到每周2小时，错误率下降了90%。

竞品价格与库存监控

阶段：视觉理解 + 数据采集

解决的问题：电商运营需要定时查看竞品的价格、销量、库存变化，人工刷新页面逐条记录效率极低。浏览器Agent能够定时访问竞品页面，通过视觉模型精准提取价格标签、库存状态等关键信息，汇总成结构化数据并写入表格。

具体案例：某电商团队使用Agent每两小时巡查5个竞品店铺的100多个商品页面，自动记录价格变动并生成比价报告。当竞品价格低于设定阈值时，系统自动推送告警，运营团队得以在10分钟内跟进调价策略。

在线购物流程辅助

阶段：任务编排 + 安全确认

解决的问题：在线购物涉及搜索、比价、加购、结算多个环节，尤其跨平台比价时非常耗时。Mariner类Agent可以按照用户指令自动完成全流程，但在支付、配送地址确认等高敏感环节会暂停等待用户确认，兼顾效率与安全。

具体案例：一位用户想让Agent帮忙买一台配置合适的笔记本电脑。Agent依次浏览三个电商平台，搜索符合处理器和内存条件的机型，将价格最低的链接加入购物车，然后在结算前向用户展示商品详情和最终价格，等用户点击“确认支付”后才完成下单。

Python 演示

python68 行
"""Project Mariner 简化模拟: 视觉驱动的浏览器Agent"""  class WebPage:    """模拟一个简化的网页, 页面上有输入框和按钮"""    def __init__(self):        self.elements = [            {"id": "input_name", "color": "white", "text": "",             "x": 100, "y": 80, "kind": "textbox"},            {"id": "btn_submit", "color": "blue", "text": "提交",             "x": 100, "y": 160, "kind": "button"},        ]        self.submitted = False  class VisionModule:    """视觉理解模块: 从页面截图中识别可交互元素"""    def detect(self, page):        """模拟视觉模型: 白色输入框和蓝色按钮可被识别"""        return [e for e in page.elements                if e["color"] in ("white", "blue")]  class Agent:    """浏览器Agent: 感知 -> 决策 -> 执行"""    def __init__(self, page, vision):        self.page = page        self.vision = vision        self.action_log = []     def decide(self, candidates):        """决策: 输入框为空就先填表, 然后点击提交"""        for elem in candidates:            if elem["kind"] == "textbox" and elem["text"] == "":                return ("type", elem)        for elem in candidates:            if elem["kind"] == "button":                return ("click", elem)        return (None, None)     def act(self, action, elem):        """执行动作, 并记录到日志中"""        if action == "type":            elem["text"] = "张三"            self.action_log.append("在输入框填写了姓名")        elif action == "click":            elem["color"] = "grey"            self.page.submitted = True            self.action_log.append("点击了提交按钮")     def run(self):        """循环执行感知-决策-动作, 直到任务完成"""        for _ in range(5):            candidates = self.vision.detect(self.page)            action, elem = self.decide(candidates)            if action is None:                break            self.act(action, elem)        return self.page.submitted  if __name__ == "__main__":    page = WebPage()    agent = Agent(page, VisionModule())    ok = agent.run()    print("提交成功!" if ok else "任务未完成")    for log in agent.action_log:        print("-", log)
目的：用不到60行Python模拟Project Mariner的核心循环——视觉模块感知页面上的可交互元素，Agent根据感知结果决定“填表”还是“点击”，循环执行直至任务完成。
  1. class VisionModule:相当于Mariner的“眼睛”，把页面状态简化为颜色特征，白色是输入框、蓝色是按钮。
  2. def detect(self, page):模拟视觉模型从页面中“看见”可交互元素，返回候选元素列表。
  3. def decide(self, candidates):决策大脑：输入框为空就先填表，否则找按钮提交，模仿Agent的策略函数 π。
  4. def act(self, action, elem):执行动作：type 往输入框填入文字，click 把按钮变灰并标记提交成功。
  5. for _ in range(5):Agent循环的上限保护，避免意外死循环，对应真实系统里的最大步数限制。
  6. elem["color"] = "grey"关键细节：按钮被点击后视觉状态改变，下次视觉感知就“看不见”它了，任务自然结束。

常见误区

误区很多人以为Mariner和传统爬虫一样，先抓取HTML，再用正则或XPath解析源码，从中提取信息。觉得“Agent读网页=读代码”。

正解Mariner的核心感知方式是视觉理解——直接对浏览器截图进行多模态编码。就像马林看海面靠眼睛而不是看航海图。HTML源码当然可以被读取，但Mariner的设计哲学是“像人一样看网页”，这对动态渲染、Canvas绘制、复杂CSS布局的页面尤其有效。

为何常见：因为过去十多年的网络爬虫、自动化测试工具（如Selenium）都是基于DOM操作的，大家习惯了“网页=HTML”的心智模型。

误区有初学者看了演示后说：“这不就是RPA（机器人流程自动化）吗？原来的UiPath也能自动填表啊。”

正解传统RPA依赖固定的元素选择器或屏幕坐标，一旦页面改版就崩溃。Mariner则通过视觉理解+大模型推理应对“从未见过的页面”：即使第一次访问一个网站，它也能根据视觉常识识别输入框和按钮。RPA好比按固定航线自动驾驶，Mariner则是能看海况随机应变的水手。

为何常见：因为两者最终都表现为“自动操作电脑”，表面相似而底层智能差距巨大。普通人容易忽略视觉理解和通用推理的价值。

误区有人以为AI Agent完全自主，设定好任务后就可以撒手不管，包括支付、登录、发送邮件等敏感操作。

正解Mariner的安全架构明确要求高风险的“敏感动作”（如付款、删除、提交个人信息）必须暂停并请求用户确认。安全沙箱、权限控制、数据过滤也都是系统标配。真正的Agent设计原则不是“完全自主”，而是“适度自主+关键时刻人机协同”。

为何常见：媒体宣传常渲染“AI帮你完成一切”的科幻画面，而低估了真实系统中安全与信任的权重。

误区认为Mariner的视觉模型只是在做“识图识字”：把截图里的文字用OCR抠出来，再用NLP处理。觉得视觉理解=高清版文字识别。

正解视觉模型不只是提取文字，它同时理解元素的视觉属性（形状、颜色、位置）、空间布局（上下左右关系、层叠顺序）和语义角色（这是个可点击的按钮、这段文字是商品标题、这个区域是导航栏）。OCR顶多算“看到了字”，视觉理解是“看懂了界面”——水手不仅要认出海上的字牌，更要判断哪里能走、哪里有礁石。

为何常见：因为OCR是最早普及的“机器看懂图片”技术，人们习惯于用它来类比一切视觉任务。

面试题

Q1. Project Mariner理解网页的主要方式是什么？

单选题 · easy

  • A.读取HTML源码解析DOM结构
  • B.通过视觉模型理解页面截图← 正确答案
  • C.调用网页后端接口获取数据
  • D.依赖第三方浏览器扩展插件

答案：B。Mariner的核心创新就是视觉驱动——把浏览器截图交给多模态模型去理解，而不是像传统爬虫那样解析HTML。它看的是像素级画面，而不是代码。

Q2. Mariner视觉感知层的原始输入是什么？

单选题 · easy

  • A.网页的CSS样式表文件
  • B.浏览器视口的截图画面← 正确答案
  • C.HTTP请求的响应头信息
  • D.JavaScript的源代码文件

答案：B。视觉理解机制的起点是浏览器视口截图 $\mathbf{I}_t$，后续一切感知都从这张像素图开始。CSS、JS、响应头都是代码层面的东西，不是视觉模型的输入。

Q3. 以下哪项属于Mariner的典型应用场景？

单选题 · easy

  • A.自动在网站上填写表单信息← 正确答案
  • B.编译并优化C语言程序
  • C.为数据库设计索引结构
  • D.训练图像分类神经网络

答案：A。Mariner擅长的是浏览器内的多步骤任务。选项B、C、D都是开发场景而非网页交互场景，填写表单才是它的主战场。

Q4. 相比传统DOM解析，视觉理解方案的突出优势是什么？

单选题 · mid

  • A.能获取页面所有隐藏元素的属性
  • B.对前端页面改版具有很强鲁棒性← 正确答案
  • C.完全不再需要浏览器渲染页面
  • D.可以直接读取网页的源代码

答案：B。前端改版会改变DOM结构但用户看到的界面可能没变，视觉理解基于像素画面，天然免疫这种变化。它需要浏览器渲染，也看不到隐藏元素，更不读源代码。

Q5. 在Mariner的任务编排中，$h_t$ 代表什么？

单选题 · mid

  • A.任务执行的总时间长度
  • B.截至当前步的历史上下文记忆← 正确答案
  • C.当前页面的超链接集合
  • D.浏览器打开的标签页数量

答案：B。$h_t$ 是从开始到第 $t$ 步的所有观察和动作的序列。正是有了这份记忆，Agent才能知道“我已经填完姓名，现在该填电话了”。它和时间、链接、标签页数量无关。

Q6. 关于Mariner的动作执行系统，下列说法正确的是？

单选题 · mid

  • A.只能执行点击这一种操作
  • B.通过模拟鼠标键盘控制浏览器← 正确答案
  • C.直接修改网页的DOM元素树
  • D.所有动作必须由用户手动触发

答案：B。动作空间包含点击、输入、滚动、导航、等待等多种原子操作，模拟真实用户操作浏览器。它不直接改DOM——那正是它想避免的传统方式；也不靠用户手动触发。

Q7. Mariner在遇到支付类敏感操作时会怎么做？

单选题 · mid

  • A.自动完成支付不做任何提示
  • B.暂停并等待用户确认后再继续← 正确答案
  • C.跳过该步骤继续执行后续任务
  • D.强制关闭浏览器终止任务运行

答案：B。安全防护体系要求高风险动作必须经过用户确认这一“闸门” $P_{\text{exec}}=1$ 才放行。Agent宁可不做也不能错做，这是它设计中最重要的安全原则。

Q8. Mariner的安全防护体系包含哪些机制？

多选题 · hard

  • A.将Agent运行在隔离的安全沙箱中← 正确答案
  • B.关键敏感操作需用户点击确认← 正确答案
  • C.设置最小化权限控制操作范围← 正确答案
  • D.彻底禁止Agent发送任何网络请求

答案：ABC。沙箱隔离、用户确认、权限控制都是Mariner安全体系的核心组件。但禁止网络请求就等于禁用了浏览器的基本功能，这不现实也不合理。

Q9. 关于Mariner的视觉理解与DOM解析，正确的说法有哪些？

多选题 · hard

  • A.视觉方式能理解Canvas绘制的页面← 正确答案
  • B.视觉方式天然理解像素级布局关系← 正确答案
  • C.视觉方式能读取隐藏元素的源码属性
  • D.视觉方式目前完全取代了DOM解析

答案：AB。Canvas画出的内容在DOM树中只是一个 <canvas> 标签，只有视觉方式才能“看见”它实际展示的内容。布局关系也是视觉层面的直接信息。但视觉方式看不到隐藏元素，并且当前方案仍会结合DOM辅助，并未完全取代。

Q10. 关于Project Mariner的完整工作流程，下列说法正确的有哪些？

多选题 · extreme

  • A.视觉模型先从浏览器截图提取特征← 正确答案
  • B.编排引擎将任务拆解为连续子步骤← 正确答案
  • C.Agent每步决策依赖历史上下文记忆← 正确答案
  • D.任务开始后中途不能修正错误操作

答案：ABC。Mariner的流程是“截图→视觉编码→任务拆解→逐步决策→执行→反馈”。每步决策都带着历史记忆 $h_t$，且具备中途纠错能力——发现页面变化会自动调整计划。任务开始后不能修正的说法是错误的。