browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
myzbx 2025-09-09 07:40 4 浏览
browser-use 可以识别网页中可交互DOM内容，并能与之进行交互。本文将详细介绍 browser-use 实现这一核心功能的技术细节。
一、可交互元素识别
browser-use 是通过 DOMService 来进行 DOM 元素的识别与交到。DOMService 主要作用如下：
- 解析和处理页面的 DOM 结构
- 提供元素定位和交互能力
- 维护元素状态和历史记录
DOMService 通过以下的条件来判断某一个DOM元素是否可交互：
// 详细可以看 buildDomTree.js
const isInteractiveElement =
hasAriaProps ||
hasClickHandler ||
hasClickListeners ||
isDraggable ||
isContentEditable
最新合入的代码里也可通过判断 element 和 cursor 是否是可交互属性， 如 pointer、cell、grab 等。
二、元素编号与描述
- 可交互元素会被分配唯一的编号，会将元素描述和编号一起发给 LLM
- 结构: [索引]<标签名 属性值1;属性值2>文本内容/>
[1]<button 登录按钮;btn-primary>登录/>
[2]<input 请输入用户名;text;username/>三、元素定位机制
- 元素映射
browser-use 内部维护着一个 selector_map 映射, 将元素索引映射到元素信息
SelectorMap = dict[int, DOMElementNode]- 元素定位
当要点击索引为 1 的元素的时候，会执行以下步骤：
@self.registry.action('Click element', param_model=ClickElementAction)
def click_element():
# 1. 获取 index 对应的 element node
element_node = await browser.get_dom_element_by_index(params.index)
# 2. 点击元素
await browser._click_element_node(element_node)
- 元素交互
_click_element_node 过程中，会优先看 element_node 能不能解析出 css_selector, 如果不可以，再使用 xpath (xptah 是构建 dom 树的时候生成)。
四、视觉辅助
当启动 use_vision 时，Agent 会将当前页面截图一起发给 LLM。
相关推荐
- 前端工程师养成计划 专区_前端工程师技能要求
-
前端工程师必修课本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分讲解CSS样式代码添加，为后面的案例课程打下基础。本课程让...
- 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
-
因为Diff算法，计算的就是虚拟DOM的差异，所以先铺垫一点点虚拟DOM，了解一下其结构，再来一层层揭开Diff算法的面纱，深入浅出，助你彻底弄懂Diff算法原理认识虚拟DOM虚拟...
- css 布局简述_css布局的几种方式
-
本篇简单介绍了css布局体系。包括Flowlayout、display、floats、positionFlowlayout(NormalFlow)CSSFormattingContext...
- dart系列之:HTML的专属领域，除了javascript之外，dart也可以
-
简介虽然dart可以同时用作客户端和服务器端，但是基本上dart还是用做flutter开发的基本语言而使用的。除了andorid和ios之外，web就是最常见和通用的平台了,dart也提供了对HTML...
- 原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
-
我们在日常编码的时候，隐藏一个dom元素有很多种方式，今天我们来盘点一下隐藏dom元素有哪些方式，最后一种，你绝对没有用过。display:none作为经常用来隐藏元素的css属性，di...
- JavaScript精通到深入_javascript进阶书籍推荐
-
前几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通JavaScript的，今天给大家带来第二讲！BOM和DOM简介BOM，BrowserObjectModel,浏览器对象模型。BO...
- 巧克力:从一朵花开始的华丽变身_巧克力花束教程视频
-
世界上几乎所有的巧克力产品，都出自四五家大公司大型工厂里的流水线。然而，“手工制作巧克力”正在成为一种潮流，吸引着越来越多的人沉醉其中。这些娇嫩的花朵，是你吃过的每一块巧克力的开始。可可花直接生长在...
- browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
-
browser-use可以识别网页中可交互DOM内容，并能与之进行交互。本文将详细介绍browser-use实现这一核心功能的技术细节。一、可交互元素识别browser-use是通过DOMS...
- HTML DOM Progress 对象_html中的对象
-
Progress对象Progress对象是HTML5新增的。Progress对象表示一个HTML<progress>元素。<progress>元素表示任务...
- HTML DOM Script 对象_html document对象
-
Script对象Script对象表示一个HTML<script>元素。访问Script对象您可以使用getElementById()来访问<scrip...
- 虚拟DOM真的比操作原生DOM快吗?前端大神提供4个参考观点!收藏
-
尤雨溪：https://www.zhihu.com/question/31809713/answer/53544875VirtualDOM真的比操作原生DOM快吗？1.原生DOM操作v...
- 前沿|一种新的植入药物或可将HIV的预防时间持续一年
-
国外已经批准了一种叫做Truvada(中文名：特鲁瓦达)的药物用于HIV感染的暴露前预防。但是由于该药需要每天服用，因此有些人可能无法坚持，从而使得该药的预防效果降低。最近一项新的研究或许可以改变这种...
- 轻量级埋点sdk搭建，便捷更全面_埋点工具
-
引言借助埋点监控sdk,我们可以统计用户的点击，页面pv、uv，脚本错误、dom上报等关键信息等。一：项目初始化1.技术栈Tsrollup打包工具2.搭建项目npminit-ytsc--in...
- China's Humanoid Robotics Race Heats Up as Tesla's Optimus Hits a Wall
-
TMTPOST--Tesla'sonce-hypedhumanoidrobotproject,Optimus,hashitasnag.Partsprocurementhas...
- 单机训练速度提升640倍!独家解读快手商业广告模型GPU训练平台Persia
-
【导读】：近期，快手宣布将在2020年春节前实现3亿DAU，快手商业化营收步伐也随之加速。快手从2018年“商业化元年”开始推行个性化的广告推荐。截止5月底，快手DAU已经突破2亿。随着用户和使用时长...
- 一周热门
- 最近发表
-
- 前端工程师养成计划 专区_前端工程师技能要求
- 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
- css 布局简述_css布局的几种方式
- dart系列之:HTML的专属领域，除了javascript之外，dart也可以
- 原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
- JavaScript精通到深入_javascript进阶书籍推荐
- 巧克力:从一朵花开始的华丽变身_巧克力花束教程视频
- browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
- HTML DOM Progress 对象_html中的对象
- HTML DOM Script 对象_html document对象
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)