揭秘AI自动化框架Browser-use(一),如何实现炫酷的页面元素标注效果

在现代Web开发与测试领域，浏览器自动化框架正逐渐成为提升效率、优化流程的关键工具。今天，我们将深入剖析AI自动化框架Browser-use，探究其如何实现令人瞩目的页面元素智能标注效果。

一、项目整体架构

Browser-use的标注系统采用了科学的分层架构，这种设计不仅提升了代码的可维护性与可扩展性，更为系统的高效运行提供了坚实保障。

browser_use/
├── dom/                    # DOM操作相关
│   ├── buildDomTree.js    # 核心标注实现
│   ├── service.py         # DOM服务层
│   └── views.py           # 数据模型定义
├── browser/               # 浏览器控制
│   ├── context.py         # 浏览器上下文
│   └── browser.py         # 浏览器实例
└── agent/                 # AI代理
    └── service.py         # 代理服务

核心流程

1. 浏览器上下文入口:

   #browser_use/browser/context.py
   # 浏览器上下文中调用DOM服务获取可点击元素
   async def get_clickable_elements(self):
       """获取可点击元素"""
       return await self.dom_service.get_clickable_elements()
   

   此处作为流程起点，通过浏览器上下文调用DOM服务，为后续标注提供基础数据。

2. DOM服务层处理:

   #browser_use/dom/service.py
   # DOM服务构建元素树并进行标注
   async def get_clickable_elements(
       self,
       highlight_elements: bool = True,
       focus_element: int = -1,
   ) -> DOMState:
       """构建DOM树并标注元素"""
       element_tree, selector_map = await self._build_dom_tree(
           highlight_elements,
           focus_element
       )
       return DOMState(element_tree=element_tree, selector_map=selector_map)
   

   DOM服务层负责构建元素树，并对元素进行标注处理，是实现标注效果的核心环节。

3. JavaScript执行标注:

   //browser_use/dom/buildDomTree.js
   // DOM树遍历的入口点
   const rootId = buildDomTree(document.body);
   

   JavaScript代码负责具体的DOM树遍历与标注执行，将标注效果最终呈现于页面之上。

二、DOM树遍历与分析：智能标注的技术基石

1. 遍历实现

//browser_use/dom/buildDomTree.js
// DOM树递归遍历的核心实现
function buildDomTree(node, parentIframe = null) {
   
   
    if (!node || node.id === HIGHLIGHT_CONTAINER_ID) {
   
   
        return null;
    }

    const nodeData = {
   
   
        tagName: node.tagName?.toLowerCase(),
        attributes: getElementAttributes(node),
        xpath: generateXPath(node),
        children: []
    };

    // 递归处理子节点
    for (const child of node.childNodes) {
   
   
        const childData = buildDomTree(child, parentIframe);
        if (childData) {
   
   
            nodeData