北屋教程网

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/>

三、元素定位机制

1. 元素映射

browser-use 内部维护着一个 selector_map 映射, 将元素索引映射到元素信息

SelectorMap = dict[int, DOMElementNode]

2. 元素定位

当要点击索引为 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)

3. 元素交互

_click_element_node 过程中，会优先看 element_node 能不能解析出 css_selector, 如果不可以，再使用 xpath (xptah 是构建 dom 树的时候生成)。

四、视觉辅助

当启动 use_vision 时，Agent 会将当前页面截图一起发给 LLM。