想象一个老小区,门牌号年久失修,住户各挂各的招牌。传统的自动化机器人送快递,只认门牌号——#username 挂在哪扇门,它就去哪扇门。可一旦住户把“302“换成”3A-02”,或者重新刷了墙,机器人就傻在原地。
Skyvern 是另一类快递员。它不记门牌,而是用眼睛看:看到“贴着'请输入账号'的白色横条”就知道该在哪输入;看到“写着'登 录'的绿色按钮”就知道该按哪里。它的“眼睛”是一个视觉大模型,职责是截取浏览器页面,像人一样理解布局、识别控件、规划动作,最后用一个“看—想—动—验”的闭环把任务做完。
这篇文章就带你走进 Skyvern 的“眼睛”与“手脚”:从截图识别、元素定位到动作执行,再对比传统 RPA 与 Playwright 的优劣,最后聊聊真实场景怎么落地。读完你会发现,网页自动化的世界里,除了精确的“门牌号导航”,还有一种更接近人类的“认路方式”。
掌握 Skyvern 的视觉驱动原理,你就能在页面频繁改版、跨站点采集等场景下,搭建出比传统选择器方案更鲁棒的网页自动化体系,并合理评估成本、速度与维护性的取舍。
可视化演示
展示Skyvern通过视觉大模型截图识别网页元素、坐标级动作执行机制及与传统RPA/Playwright的对比,动态演示无DOM选择器自动化全流程。
本节配有交互动效(进入视口后自动加载,约 3KB)。
截图识别:视觉模型理解网页界面 青色为截图扫描 浅青为元素检测 橙色为动作生成 Screenshot → VLM → Elements → Actions Skyvern通过视觉大模型将网页截图转化为结构化元素列表,不依赖DOM选择器
认识Skyvern
想象一下,你派了两名快递员去一个没有统一门牌号的老小区送件。第一位是“导航机器人”,它只认精确的门牌号字符串,比如 #username、.btn-login;可住户刚把“302“换成”3A-02“,它就迷路了。第二位是”眼力派“快递员,他站在楼道口扫一圈,看到”贴着'请输入账号'的白色横条”“写着'登 录'的绿色圆角按钮”,就知道下一步该做什么。Skyvern 就是第二位快递员——一个用视觉大模型“看”网页的自动化 Agent。
Skyvern 是一个开源的视觉驱动网页自动化工具。它不读 DOM 选择器,而是把浏览器页面截图扔给视觉大模型(例如 GPT-4o、Claude 这类多模态模型),让模型像人一样理解“这个页面长什么样、哪些东西能点、用户想让我做什么”,再自己规划出一步步操作并执行。传统工具把网页当作“代码结构”,Skyvern 却把网页当作“眼睛看到的画面”。
从工程视角看,Skyvern 把一个自动化任务抽象成四个要素:用户目标、初始截图、可用动作、成功判据。
就像快递员会把“把包裹送到 302”扩展成“上楼→看门牌→敲门→确认收件人”的一串小动作,Skyvern 也把大目标拆成一步步可执行动作,而它的每一步都建立在“看懂画面”之上。认路靠眼睛,干活靠脑子——这是 Skyvern 与所有传统自动化工具最本质的分水岭。
- 目标指令 g用户用一句话描述想完成的事,例如“帮我登录后台”,它是所有决策的指南针。
- 初始截图 I₀浏览器对当前页面截取的第一张图,等价于快递员站在门口看到的“第一眼”。
- 动作集合 ASkyvern 预先定义好“能做的事”,比如点击、输入、选择、悬停。
- 成功判据 τ判断任务是否完成的条件,比如“页面出现欢迎语”就返回 1。
截图识别流程
快递员到陌生小区,第一件事不是敲门,而是先扫一眼整条街:哪家是卖菜的、哪家窗户亮着灯、哪家门口停着车——这一眼就把环境大概记在心里。Skyvern 的第一步同样如此,它先把当前页面完整截图,相当于把“整条街”完整拍成一张照片,作为后续所有决策的原始依据。
这张截图对计算机而言并不是“一张图”,而是一个多维的像素数组:每个像素由红、绿、蓝三个通道的强度组成,成千上万个像素按行列排布,拼出我们眼中“有意义的画面”。
拿到像素只是“看见了”,离“看懂了”还差一步——视觉模型要做视觉解析:识别出“这是一张登录页,顶部是导航栏,中间有两个输入框,下方是按钮”。接着进入元素识别与目标匹配:模型把可交互的控件从背景中圈出来,再把用户目标(比如“登录”)与这些控件做语义比对,决定“哪个框该填账号、哪个按钮该点”。
这一整套“拍照→看懂→认出控件→锁定目标”的流程,就好比快递员进门后的三步曲:先整体扫视街道,再锁定目标店铺,最后把目光定格在招牌上。每一步都靠“看”,而不是靠记忆中一串死号码——这正是 Skyvern 能在陌生页面上立足的根基。
- 行列像素 p(h,w)每个像素按第 h 行、第 w 列排布,构成画面的“马赛克底盘”。
- RGB 三通道红、绿、蓝每个通道各有一个强度值,共同决定像素颜色。
- 整体形状整张截图是“高 H × 宽 W × 3 通道”的三维数组。
元素定位机制
快递员认准“挂着绿色招牌的那家店”之后,还会再确认一下招牌上的字,而不是闭着眼冲过去。Skyvern 定位元素也一样:当视觉模型在截图里圈出若干候选元素后,它要给每个候选元素打分,选出与目标语义最匹配的那一个,并给出精确的边界框坐标。
假设目标是“登录按钮”,页面上有十来个元素:几个输入框、几个链接、几个按钮。模型把目标描述转成一个语义向量,把每个候选元素的外观与文字也转成向量,然后计算相似度,得分最高的候选就是“登录按钮”。
这个“边界框标定 + 语义打分”的机制取代了传统选择器。模型不需要知道元素的 id 或 class,只需要输出一个矩形框 (x, y, width, height) 把元素圈住——它知道“这个框里的东西长得像登录按钮”就够了。更妙的是动态容错:页面滚动、弹窗遮挡、按钮文案从“登 录”变成“登录”,模型都能结合占位符文字、附近标签和图标形状重新判断,这就是语义理解带来的韧性。
快递员认店不认门牌号:招牌画了个大大的绿色对勾,他就认定这家,哪怕隔壁新开三家店也不受影响。Skyvern 的定位正是“认招牌、认环境”——招牌稍微改个字、挪个位置,它依然认得出来,因为它在理解的层面工作,而不是背字符串。
- 语义向量 v把目标描述与候选元素都编码成向量,让“能不能比较”变得可行。
- 相似度 sim计算两个向量的余弦距离,方向越一致分值越高。
- argmax 挑选在候选集合里选出得分最高的元素作为最终目标。
动作执行原理
认准了门,快递员就开始动手:按门铃、递包裹、请对方签字确认。Skyvern 的动作执行也是这个节奏:定位到元素后,根据动作类型执行点击、输入、选择或滚动,然后立刻截图检查页面是否如预期发生了变化,形成一个“看—想—动—验”的闭环。
这个闭环可以形式化成一个循环:每一步,模型根据最新截图和总目标输出一个动作,执行后环境发生变化,模型再基于新截图决定下一步,直到成功判据被满足。
为了应对失败,Skyvern 内置了智能重试:点击后立刻截图验证,如果页面状态没变化,不会傻等,而是换一种方式——滚动后再点、尝试旁边相似候选元素、或者重新解析一次页面。这相当于快递员按了门铃没人应,他会探头看看后门有没有开,而不是站在门口干等。
多步规划让 Skyvern 能撑起复杂任务:比如“登录后台→进入设置→修改邮箱→保存”。它不靠录制好的宏,而是靠大模型的推理能力把大目标拆成小步骤,每执行一步就基于新截图重新决策,最终形成任务闭环。有经验的快递员不是机械地按流程走,而是根据每扇门前的实际情况随时调整:这家门铃坏了就敲门,那家没人就放快递柜。Skyvern 的每一步动作都有“看一眼再决定”的兜底,这正是它比固定脚本聪明的地方。
- 观察 o(t)第 t 步时模型看到的最新页面截图,是决策的唯一输入。
- 策略 π视觉-语言模型根据截图和目标输出动作,θ 是模型参数。
- 循环终止条件成功判据返回 1 时任务结束,否则继续“看-想-动”。
对比传统工具
传统 RPA 工具是最典型的“门牌号机器人”:录制屏幕坐标、抓取控件属性,屏幕一变就失灵。混合自动化框架 Playwright 则用 CSS 选择器与 XPath 定位,速度快、确定性高,但页面一改版脚本就得跟着改——住户把门牌从“302“换成”3A-02”,机器人瞬间就懵了。
Skyvern 放弃 DOM 选择器,换来的是跨页面强适配;代价是每一步都要调用视觉模型,速度慢、成本高。衡量一个定位方案好不好,业界常用 F1 指标综合评估其准确率与召回率。
那到底怎么选?可以记住一个经验法则:页面频繁改版、跨站采集、追求通用性 → 选 Skyvern;追求极致速度、毫秒级高频回归 → 选 Playwright。更聪明的做法是混搭:用 Playwright 的选择器跑主干流程,遇到找不到元素的场景时,调 Skyvern 做视觉兜底,各自发挥长处。
导航机器人适合在固定线路上跑得飞快,眼力快递员适合满城乱转、到处是新环境的活。二者没有谁绝对高级,只有谁更适合今天的路况——对自动化工程师来说,工具箱里多一种工具,就多一份从容。
- 准确率 P定位到的元素中,确实正确的比例。
- 召回率 R应当定位到的元素中,被成功找出的比例。
- 调和平均准确率和召回率都重要,F1 防止“只准不全”或“只全不准”。
优势与局限
Skyvern 的优势很直观:强鲁棒性。页面改版、A/B 测试、阴影 DOM、甚至 Canvas 绘制的界面,它都能像人眼一样重新识别;跨页面适配能力突出,同一套视觉理解能力换到不同网站依旧可用,写一遍就能到处跑。
局限同样现实:每一步动作都要“截图、发模型、等返回”,延迟从选择器方案的几十毫秒涨到几百毫秒甚至更高;推理成本随步骤数线性累积。可以用一个求和式来表达单次任务的成本结构。
性能瓶颈同样不容忽视:视觉模型可能误判复杂图标、重叠弹窗;在需要 100% 确定性的合规场景里,纯视觉方案难以保证每次都对。因此生产环境中,常见做法是设置“人工确认”节点,或让 Skyvern 在识别失败时自动降级到选择器方案,形成双保险。
快递员眼力虽好,但每到一个路口都要“停下来四处打量”,时间就这么耗掉了;当街巷一成不变、天天跑同一条线时,导航机器人明显更划算。所以现在越来越多的团队让两者搭档:选择器打主力,视觉做救火队。
- 单步三费每一步都要支付截图、视觉推理、动作执行三部分成本。
- 总步数 T任务越复杂,动作步数越多。
- 线性累加总成本随步数线性增长,没有规模效应。
应用实践场景
快递员的价值,最终体现在一个个真实的送件任务里。Skyvern 最典型的落地场景有三类:表单填写、数据采集、流程遍历。
- 表单填写:注册、登录、下单、改价……这些页面天天换皮肤,但“账号框”“提交按钮”的视觉特征从不变。用自然语言描述目标,Skyvern 就能完成整套填写提交。
- 数据采集:从列表页、详情页抓取结构化数据,不必为每个网站手写一套解析器,视觉识别天然适配千差万别的站点。
- 流程遍历:多步骤跨页面流程(如审批流、巡检工单),靠多步规划与验证闭环逐步推进。
衡量这类方案到底可不可用,最直接的指标是任务成功率。
以一个“批量修改电商后台商品价格”的任务为例:运营用自然语言描述“把所有库存大于 100 的商品价格下调 5%”,Skyvern 自动执行——登录后台、进入商品列表、逐个打开编辑页、定位价格输入框、改价、保存、翻页。全程靠截图与视觉推理驱动,后台再怎么改版,这套自动化都不需要改代码。
快递员每天送不同的小区、不同的楼栋,靠的不是背下每一户的门牌号,而是“会看、会想、会验证”的通用能力。Skyvern 把这种通用能力带进了网页自动化,让机器也学会了“用眼睛干活”,这正是它作为视觉驱动 Agent 的最大价值。
- 逐一实验对 N 个任务样本分别跑一次,i 从 1 数到 N。
- 成功计数任务成功记 1,失败记 0,指示函数负责计数。
- 求平均成功数除以样本总数,再乘 100% 得到成功率。
AI 应用场景
电商后台批量改价
阶段:智能体规划与动作执行
解决的问题:传统 RPA 依赖 DOM 选择器与坐标,电商后台每次 UI 改版都要重写脚本;人工逐条改价又耗时易错。Skyvern 用视觉识别加多步规划,把“找到价格输入框并修改”变成通用能力,页面改版不再影响自动化流程。
具体案例:某电商运营团队每天要调整数百个SKU的价格。他们用自然语言向 Skyvern 描述规则:“库存大于 100 的商品降价 5%”,Skyvern 自动登录后台、遍历商品列表、逐页打开编辑页、识别价格输入框完成修改并保存,全程截图验证,最终输出一份改价成功清单。
跨站点竞品数据采集
阶段:视觉提取与结构化输出
解决的问题:竞品监测需要同时采集十几个网站的促销信息,每个站点页面结构完全不同,手写采集器成本极高。Skyvern 的截图识别不依赖具体站点的 DOM 结构,同一套视觉模型即可适配所有站点。
具体案例:某市场调研团队每周自动打开 20 个竞品页面,Skyvern 通过视觉识别提取价格、促销按钮文案、优惠券入口等信息,整理成结构化 JSON 报表推送至企业微信。新增站点只需用一句话描述“采集什么”,无需编写任何解析代码。
端到端 UI 回归测试的视觉兜底
阶段:混合自动化测试执行
解决的问题:Playwright 脚本在页面元素改版后失败率飙升,维护成本高。采用混合方案,让 Skyvern 充当“视觉兜底”,当选择器找不到元素时自动切换视觉定位,把失败从“脚本报错”变成“自动完成”。
具体案例:某 SaaS 公司的发布流水线中,Playwright 负责主干回归,遇到页面 A/B 测试导致按钮文案变化时,Skyvern 通过截图识别重新定位目标元素并完成点击,测试通过率从 82% 提升到 98%,脚本维护工时下降了约 60%。
Python 演示
# -*- coding: utf-8 -*-"""模拟 Skyvern 视觉定位与动作循环的小型演示"""MOCK_PAGE = [ {"id": "user", "role": "input", "text": "", "placeholder": "请输入账号", "bbox": [80, 120, 320, 160]}, {"id": "pass", "role": "input", "text": "", "placeholder": "请输入密码", "bbox": [80, 180, 320, 220]}, {"id": "login", "role": "button", "text": "登 录", "placeholder": "", "bbox": [150, 240, 250, 280]},] def sim_score(text, goal): """模拟视觉语义匹配: 查询词命中文本的比例""" if not text: return 0.0 hits = sum(1 for tok in goal if tok in text) return hits / len(goal) def vision_find(elements, goal): """等价于视觉模型在截图中圈出目标: 返回得分最高的元素""" best, best_score = None, 0.0 for el in elements: score = sim_score(el.get("text") or el.get("placeholder") or "", goal) if score > best_score: best, best_score = el, score if best and best_score >= 0.5: return best return None def run_task(page, task): """执行动作计划, 模拟 看->想->动->验 的闭环""" plans = { "login": [("fill", "账号", "admin"), ("fill", "密码", "123456"), ("click", "登录")], } actions = plans.get(task, []) logs = [] for kind, goal, *value in actions: target = vision_find(page, goal) if target is None: logs.append("失败: 视觉模型未找到目标 " + goal) return False, logs logs.append("成功: %s 目标=%s 命中元素=%s" % (kind, goal, target["id"])) logs.append("验证: 页面出现欢迎页, 任务闭环完成") return True, logs def main(): ok, logs = run_task(MOCK_PAGE, "login") print("\n".join(logs)) print("任务结论: " + ("成功" if ok else "失败")) if __name__ == "__main__": main()
def vision_find(elements, goal):视觉模型的主入口,输入页面元素表和自然语言目标,返回最匹配的元素。score = sim_score(el.get("text") or el.get("placeholder") or "", goal)把元素的可见文字与目标做语义打分,等价于“看招牌认门”。if best and best_score >= 0.5:只有得分过半才认为“认出”目标,避免随便抓一个充数。for kind, goal, *value in actions:解包动作计划,逐个执行“填账号、填密码、点登录”。target = vision_find(page, goal)每步动作前先“看一眼”当前页面,这是闭环的第一步。logs.append("验证: 页面出现欢迎页, 任务闭环完成")模拟动作后的截图验证,构成“看-想-动-验”的最后一步。
常见误区
误区视觉 AI 这么强,应该什么网页都能自动搞定吧?连最复杂的后台系统也能 100% 准确操作,不用人管。
正解视觉模型同样会“看走眼”。复杂图标、重叠弹窗、懒加载内容都可能导致误判;在需要绝对确定性的场景,仍需人工确认或选择器兜底。Skyvern 只是“不依赖 DOM 选择器来定位”,并非“对页面效果免疫”——它依然要求页面能被正常渲染和截图。
为何常见:宣传材料常突出“免 DOM 选择器”,容易让人脑补成无所不能,忽略了视觉理解本身的误差边界。
误区识别按钮不就是目标检测吗?用 YOLO 识别出登录按钮的位置不就行了,为什么要用大模型?
正解目标检测只能识别训练过的有限类别,撑不起“理解页面语义、理解自然语言目标、规划多步动作”。Skyvern 的价值在于跨模态的语义理解与推理——它知道“登录按钮旁边的输入框是填密码的”,这种能力来自视觉-语言大模型,而不是单纯的目标检测器。
为何常见:大家熟悉传统 CV,容易把“识别”等同于“理解”,低估了自然语言与视觉结合推理的难度。
误区视觉方案更聪明,以后写自动化脚本不用再管选择器和坐标了,全部换 Skyvern。
正解每步视觉推理都带来额外延迟与成本。毫秒级高频回归、大规模并行执行等场景仍然不适合纯视觉方案。实践中主流做法是混合架构:Playwright 跑主干、Skyvern 处理复杂或易变的元素,各取所长。
为何常见:对比类文章常放大视觉方案的优势,却很少提“每一步都调大模型”的账单。
误区全程自然语言描述就行,跟用 ChatGPT 聊天一样,完全零代码。
正解落地部署仍需写任务定义、接入浏览器环境、处理登录态与验证码、设置重试与降级策略、解析结构化输出、监控成本。它降低了脚本维护成本,但不是“零代码”——更像把“写选择器”换成了“写任务说明书”。
为何常见:演示视频高度简化,只展示“描述→执行→完成”,把中间的工程细节全部隐藏了。
误区无限滚动、动态注入、Canvas 图形界面,视觉方案应该都能稳定处理吧?
正解视觉模型只对“看得见”的元素有效。如果目标藏在懒加载的折叠面板里,或者 Canvas 频繁重绘,模型同样可能失败。Skyvern 靠多步规划与智能重试来弥补视觉盲区——多看一眼、换一种方式找,而不是天然免疫所有动态变化。
为何常见:把“鲁棒性强”理解成“无限能力”,忽视了视觉感知本身的物理边界。
面试题
Q1. Skyvern 与 Playwright 在元素定位上的核心区别是什么?
- A.Skyvern 用 XPath 找元素
- B.Skyvern 用 CSS 选择器定位
- C.Skyvern 用视觉模型识别定位← 正确答案
- D.Skyvern 用坐标硬编码定位
答案:C。Skyvern 的核心特征是“截图 + 视觉大模型”理解页面并定位元素,不依赖 XPath、CSS 选择器或坐标。Playwright 才是依赖选择器的典型代表,而坐标硬编码是传统 RPA 的早期做法。C 最准确地描述了 Skyvern 的定位机制。
Q2. 传统 RPA 脚本在页面改版后容易失效的根本原因是什么?
- A.网络延迟突然变得很大
- B.依赖 DOM 结构或坐标死信息← 正确答案
- C.目标服务器主动拒绝访问
- D.用户浏览器版本等级过低
答案:B。传统 RPA 依赖 DOM 选择器、控件属性或屏幕坐标这类“死信息”,页面改版等于换了门牌号,脚本自然找不到目标。网络、服务器和浏览器版本不是改版失效的根本原因。
Q3. Skyvern 动作循环的正确顺序是哪一项?
- A.动作→截图→规划→验证
- B.截图→规划→动作→验证← 正确答案
- C.验证→动作→截图→规划
- D.规划→验证→截图→动作
答案:B。Skyvern 每一步都是先截图观察,再由模型规划动作,执行后截图验证结果,形成“看—想—动—验”的闭环。B 完整且顺序正确,其余选项都打乱了闭环的因果顺序。
Q4. 在任务形式化定义 Task = ⟨g, I₀, A, τ⟩ 中,τ 表示什么?
- A.用户的自然语言目标指令
- B.可执行的动作集合定义
- C.任务开始时的初始截图
- D.判断任务成功的判定条件← 正确答案
答案:D。τ 是成功判据(termination condition),决定任务何时算完成,例如“页面出现欢迎语”。g 是目标指令,I₀ 是初始截图,A 是动作集合,只有 D 与 τ 的含义一致。
Q5. 在元素匹配公式 a\* = argmax sim(v(g), v(a)) 中,v(a) 代表什么?
- A.用户目标文本的编码向量
- B.页面各候选元素的语义向量← 正确答案
- C.页面原有的 HTML 源码信息
- D.元素的边界框坐标的集合
答案:B。v(a) 是候选元素 a 的视觉语义向量,由模型从元素的截图外观、文字、占位符等信息编码得到。v(g) 才是目标文本向量,边界框坐标是定位的输出结果而非输入向量。
Q6. Skyvern 智能重试机制的核心做法是什么?
- A.固定等待若干秒后重新尝试
- B.直接刷新页面重新加载再来
- C.执行后截图验证未生效换策略← 正确答案
- D.立即终止任务并上报错误
答案:C。Skyvern 每执行一个动作后都会截图验证页面状态;若未生效,会换一种策略重试,例如滚动后再点或尝试相似候选元素。它不是盲目等待、刷新或直接放弃,而是“看结果再决策”。
Q7. Skyvern 每一步动作的成本构成是什么?
- A.截图成本加视觉推理加动作执行← 正确答案
- B.网络带宽成本加 CPU 计算成本
- C.浏览器内存成本加存储成本
- D.人工审核成本加维护成本
答案:A。Skyvern 的每一步都要先截图、再调用视觉大模型推理、最后执行动作,三部分成本累加且随步数线性增长。这解释了为什么视觉方案比选择器方案慢且贵。其他选项描述的都不是 Skyvern 特有的成本结构。
Q8. Skyvern 相比传统 RPA 的优势有哪些?
- A.页面改版后通常仍然能正常工作← 正确答案
- B.同一套视觉能力能跨网站复用← 正确答案
- C.运行速度更快且推理成本极低
- D.对 Canvas 绘制的界面也能操作← 正确答案
答案:ABD。视觉方案不依赖 DOM,改版后仍能靠“眼神”重新识别,A 正确;同一套模型可适配不同网站,B 正确;Canvas 界面没有 DOM 元素,选择器方案失效,但视觉方案能“看”,D 正确。C 说反了,Skyvern 比传统方案更慢、成本更高。
Q9. 以下哪些场景更适合选择 Skyvern 而不是 Playwright?
- A.页面频繁改版的电商后台操作← 正确答案
- B.跨站点竞品信息批量采集任务← 正确答案
- C.毫秒级要求的高频回归测试
- D.依赖视觉语义理解的多步流程← 正确答案
答案:ABD。页面频繁改版、跨站点采集、多步语义流程都是 Skyvern 的强项——它不依赖具体站点的 DOM 结构,适应力强。毫秒级高频回归追求的是速度和低成本,Playwright 更合适,因此 C 不选。
Q10. 关于 Skyvern 视觉定位的动态容错,以下说法正确的是?
- A.结合占位文字与图标辅助判断元素← 正确答案
- B.懒加载折叠面板中的元素必然失败
- C.页面变化后重新截图并语义重匹配← 正确答案
- D.输入框文字变化必然导致定位失败
答案:AC。Skyvern 会综合占位文字、图标、附近标签做语义判断,A 正确;页面变化后重新截图并重新做语义匹配正是其容错机制,C 正确。B 和 D 用了“必然”这种绝对化表述——Skyvern 可以通过滚动展开面板、重新匹配等方式补救,并非必然失败。