browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

myzbx 2025-09-09 07:40 350 浏览

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。

DOM 简介

上一篇：HTML DOM Progress 对象_html中的对象
下一篇：巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿