首页/资讯中心/详情

DOMSteer：基于DOM操作的AI智能体网页自动化框架设计与实现

DOMSteer：基于DOM操作的AI智能体网页自动化框架设计与实现
📅 发布时间：2026/6/21 7:39:11

1. 项目概述：当AI智能体学会“看”网页

最近在折腾一个挺有意思的东西，我把它叫做“DOMSteer”。简单来说，这是一个能让AI智能体像人一样“看见”并“操作”网页界面的框架。它不是简单地调用API，也不是基于图像识别，而是直接与网页的DOM（文档对象模型）结构打交道，实现一种“原位辅助”的能力。

想象一下这个场景：你正在一个复杂的后台管理系统里填写表单，或者在一个满是选项的配置页面里不知所措。这时候，如果有一个智能助手，不仅能理解你的问题（比如“帮我把这个用户的权限改成编辑”），还能直接“伸手”在网页上帮你点选、输入、提交，整个过程就像有一个隐形的专家坐在你旁边帮你操作一样。DOMSteer要做的就是这件事——让AI智能体获得这种基于DOM的“动手能力”。它的核心价值在于，将大语言模型的理解与决策能力，与浏览器环境的精确操控能力结合起来，解决那些需要复杂、多步骤交互的网页任务自动化问题。无论是电商运营、数据录入、系统巡检，还是软件测试，只要是在浏览器里完成的工作，它都有可能帮上忙。

2. 核心思路：为什么是DOM，而不是图像或API？

在构思DOMSteer时，我们面临几个主流技术路线的选择：基于图像识别的RPA（机器人流程自动化）、基于浏览器API的自动化（如Puppeteer、Selenium），以及我们最终选择的基于DOM操作的路径。这里详细拆解一下背后的思考。

2.1 图像识别路线的局限性

基于图像识别（或计算机视觉）的方案，其优点是“所见即所得”，不关心底层代码，模仿人类视觉。但缺点也很明显：

  1. 稳定性差：UI样式、主题、分辨率、字体大小的微小变化都可能导致识别失败。一个按钮颜色从蓝色变成绿色，可能就让AI“找不着北”了。
  2. 效率低下：需要持续截屏、推理，计算开销大，响应速度慢。
  3. 缺乏语义：AI看到的是一个“色块”，它很难理解这个色块是一个“提交按钮”、一个“下拉菜单”还是一个“警告弹窗”，除非进行额外的、复杂的上下文训练。

2.2 纯API自动化路线的不足

像Puppeteer这样的工具非常强大，可以编程控制浏览器的几乎所有行为。但它本质上是一个“脚本执行器”，缺乏“智能”。你需要为它编写精确的、步骤固定的脚本。如果页面结构变了，脚本就会报错。它无法处理“如果这个按钮没找到，试试另一种方法”这类需要理解和变通的情况。

2.3 DOM操作路线的优势与挑战

DOM是浏览器对网页结构的内部表示，一个由标签、属性、文本节点构成的树。选择基于DOM操作，是基于以下考量：

优势：

  • 高精度与稳定性：通过CSS选择器、XPath或属性定位元素，只要页面核心逻辑和DOM结构不变，定位就极其稳定。比图像识别可靠得多。
  • 富语义信息：DOM节点天然携带语义信息。一个<button>标签大概率是可点击的，一个<input type="text">是需要填写的，一个<select>是下拉框。这些信息可以直接被AI理解。
  • 高效轻量：获取和解析DOM树是浏览器的原生能力，速度极快，数据量也比图像小几个数量级。
  • 可模拟复杂交互：不仅能点击和输入，还能获取元素状态（是否可见、是否禁用、当前值）、监听事件、执行复杂的JavaScript操作，实现高度拟人的交互。

挑战：

  • DOM结构的复杂性：现代网页的DOM树可能非常庞大和嵌套，包含大量无关的样式、脚本节点。如何从中提取出对任务有用的、简洁的“语义视图”是一大难点。
  • 动态内容处理：单页应用（SPA）会动态更新DOM，如何捕获这些变化并同步给智能体？
  • 安全与权限：浏览器安全策略（如跨域限制、Shadow DOM）会阻碍对某些DOM的访问。

DOMSteer的设计目标，就是最大化DOM路线的优势，同时系统性地解决这些挑战。

3. 系统架构与核心模块设计

DOMSteer不是一个单一的工具，而是一个包含多个协同模块的框架。下图展示了其核心架构：

（注：此处用文字描述架构图，实际博文中可根据发布平台支持情况决定是否嵌入） 整个系统可以看作一个“感知-思考-行动”的循环，运行在Chrome扩展环境中。

3.1 感知层：DOM提取与抽象模块这是智能体的“眼睛”。它的任务不是把整个DOM树丢给AI，那太“嘈杂”了。我们需要一个“过滤器”和“翻译器”。

  • 功能：注入到目标网页的Content Script，监听DOM变化。
  • 核心工作：
    1. 简化与过滤：移除<script>,<style>，合并纯文本节点，过滤掉仅用于布局的<div>和<span>。目标是保留有交互语义的节点（可操作元素）和关键信息节点（文本内容）。
    2. 属性增强：为每个元素计算并附加对AI有用的属性：
      • is_visible: 是否在视口内且未被遮挡。
      • is_interactable: 是否可点击、可输入（非disabled）。
      • importance_score: 基于位置、大小、标签类型（如button比div得分高）的启发式评分。
    3. 结构扁平化与语义分组：将深度嵌套的DOM树转换为一个相对扁平的、带层级关系的元素列表。同时，将逻辑上属于一组的元素（如表单域和其标签）关联起来。
  • 输出：一个结构化的JSON对象，描述了当前页面的“可操作界面状态”。这个JSON远比原始DOM简洁，但包含了所有必要信息。

3.2 思考层：智能体决策引擎这是智能体的“大脑”。它接收来自感知层的页面状态和用户指令，决定下一步做什么。

  • 核心组件：一个大语言模型（LLM），例如GPT-4、Claude 3或开源的DeepSeek-V2等。关键是要选择支持长上下文、且推理能力强的模型。
  • 提示词工程：这是成败的关键。我们给AI的指令（Prompt）需要精心设计：
    • 角色定义：“你是一个网页操作专家，可以通过操作DOM元素来完成任务。”
    • 输入格式说明：明确告知AI，它将收到一个页面状态JSON，并解释其中字段的含义。
    • 动作规范：定义一套AI可以执行的原子操作，例如：CLICK(selector),TYPE(selector, text),SELECT(selector, option_value),SCROLL(direction),WAIT(condition),EXTRACT_DATA(selector)。
    • 推理链要求：要求AI逐步思考（Chain-of-Thought），先分析目标，再评估当前页面状态，最后选择最合适的动作。必须输出JSON格式的指令。
  • 工作流程：
    1. 将“页面状态JSON”和“用户指令”组装成Prompt，发送给LLM。
    2. LLM返回一个JSON，例如：{"action": "CLICK", "selector": "#submit-button", "reason": "用户要求提交表单，这是提交按钮。"}

3.3 行动层：指令执行与安全模块这是智能体的“手”。它负责将AI的决策安全、准确地转化为浏览器中的真实操作。

  • 指令解析器：验证AI返回的JSON格式是否正确，动作是否在允许列表中。
  • 安全沙箱：这是至关重要的部分，防止AI执行危险操作。
    • 操作白名单：只允许执行预定义的安全操作（点击、输入等）。禁止执行如eval()、修改window.location到未知域名等危险行为。
    • 选择器验证：在执行前，尝试用document.querySelector查找元素。如果找不到，或找到多个元素，则视为无效指令，触发错误处理流程。
    • 操作节流与确认：对于“删除”、“确认支付”等高风险操作，可以设置为需要用户二次确认。
  • 执行器：通过Chrome扩展的API，在页面上执行验证通过的操作。同时，它还会监控执行结果（如点击后是否触发了页面跳转或DOM更新），并将结果反馈给感知层，开启下一个“感知-思考-行动”循环。

3.4 控制中枢：Chrome扩展后台服务协调以上所有模块。管理用户会话、维护操作历史、处理与LLM服务的通信、提供用户配置界面（如设置API密钥、选择模型、定义高风险操作列表等）。

4. 实操：从零搭建一个基础版DOMSteer

理论讲完了，我们动手实现一个简化版，让你感受一下整个流程。我们将以开发一个Chrome扩展为核心。

4.1 环境准备与项目初始化

首先，创建一个新的目录作为项目根目录。

mkdir domsteer-demo cd domsteer-demo

我们需要一个标准的Chrome扩展结构。创建以下文件和文件夹：

domsteer-demo/ ├── manifest.json # 扩展配置文件 ├── background.js # 后台服务脚本 ├── content.js # 注入到页面的内容脚本（感知层） ├── popup.html # 扩展弹出窗口的界面 ├── popup.js # 弹出窗口的逻辑 └── icons/ # 扩展图标目录 ├── icon16.png ├── icon48.png └── icon128.png

manifest.json是扩展的“身份证”，我们配置基础信息和权限：

{ "manifest_version": 3, "name": "DOMSteer Demo", "version": "1.0", "description": "一个基于DOM操作的GUI智能体原型", "permissions": [ "activeTab", "scripting", "storage" ], "host_permissions": [ "<all_urls>" ], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_idle" } ], "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }

注意：host_permissions设置为<all_urls>是为了演示方便。在产品化时，应遵循最小权限原则，改为["*://*.your-target-domain.com/*"]。

4.2 感知层实现：内容脚本（content.js）

这个脚本负责抓取和简化DOM。我们实现一个简化版的提取器。

// content.js (function() { 'use strict'; // 判断元素是否可见 function isElementVisible(el) { if (!el) return false; const rect = el.getBoundingClientRect(); const style = window.getComputedStyle(el); return !!(rect.width && rect.height && style.visibility !== 'hidden' && style.display !== 'none'); } // 判断元素是否可交互 function isElementInteractable(el) { if (!el || !isElementVisible(el)) return false; if (el.disabled) return false; // 简单判断：如果是表单元素、链接、按钮，或有点击事件监听器，则认为可交互 const tagName = el.tagName.toLowerCase(); const interactableTags = ['input', 'button', 'a', 'select', 'textarea']; if (interactableTags.includes(tagName)) return true; // 这里可以更复杂，比如检查是否有onclick属性或事件监听器 return false; } // 计算元素的重要性分数（简化版） function calculateImportance(el) { let score = 0; const tagName = el.tagName.toLowerCase(); const role = el.getAttribute('role'); const area = el.offsetWidth * el.offsetHeight; // 标签权重 const tagWeights = { button: 10, input: 8, a: 6, select: 5, textarea: 5 }; score += tagWeights[tagName] || 1; // ARIA角色权重 if (role === 'button' || role === 'link') score += 5; // 面积权重（越大越重要） if (area > 1000) score += 3; else if (area > 100) score += 1; return score; } // 生成唯一且稳定的CSS选择器（简化版，生产环境需用更健壮的库） function generateSelector(el) { if (el.id) return `#${el.id}`; // 简单路径生成，可能不稳定，仅用于演示 const path = []; let current = el; while (current && current.nodeType === Node.ELEMENT_NODE) { let selector = current.tagName.toLowerCase(); if (current.className && typeof current.className === 'string') { const classes = current.className.trim().split(/\s+/).filter(c => c); if (classes.length > 0) { selector += '.' + classes.join('.'); } } path.unshift(selector); if (current.id) break; // 有ID就终止，保证唯一性 current = current.parentElement; } return path.join(' > '); } // 主函数：提取页面可操作元素状态 function extractPageState() { const allElements = document.querySelectorAll('*'); const interactiveElements = []; allElements.forEach(el => { if (isElementInteractable(el)) { const selector = generateSelector(el); // 避免重复选择器（生成方法不完美可能导致重复） if (interactiveElements.some(item => item.selector === selector)) return; const tagName = el.tagName.toLowerCase(); const type = el.type || ''; const name = el.name || ''; const value = el.value || ''; const text = el.textContent?.trim().substring(0, 50) || ''; // 截取前50字符 const placeholder = el.placeholder || ''; interactiveElements.push({ selector: selector, tagName: tagName, type: type, name: name, value: value, text: text, placeholder: placeholder, visible: isElementVisible(el), importance: calculateImportance(el) }); } }); // 按重要性排序 interactiveElements.sort((a, b) => b.importance - a.importance); // 返回页面状态摘要 return { url: window.location.href, title: document.title, timestamp: Date.now(), interactiveElements: interactiveElements.slice(0, 50) // 只返回最重要的50个元素 }; } // 监听来自popup或background的请求 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.action === 'GET_PAGE_STATE') { const state = extractPageState(); sendResponse({ success: true, state: state }); } return true; // 保持消息通道异步打开 }); console.log('DOMSteer Content Script loaded.'); })();

4.3 思考与行动层实现：弹出窗口与后台服务

popup.html提供一个简单的用户界面：

<!DOCTYPE html> <html> <head> <style> body { width: 400px; padding: 15px; font-family: sans-serif; } textarea, button { width: 100%; margin-top: 10px; box-sizing: border-box; } textarea { height: 80px; } #status { margin-top: 10px; padding: 10px; border-radius: 4px; } .success { background-color: #d4edda; color: #155724; } .error { background-color: #f8d7da; color: #721c24; } .info { background-color: #d1ecf1; color: #0c5460; } </style> </head> <body> <h3>DOMSteer 控制器</h3> <p>当前页面: <span id="current-url">...</span></p> <textarea id="user-instruction" placeholder="输入你的指令，例如：'在搜索框输入AI，然后点击搜索按钮'"></textarea> <button id="execute-btn">执行指令</button> <div id="status"></div> <script src="popup.js"></script> </body> </html>

popup.js处理用户交互，并与content script、background script通信：

// popup.js document.addEventListener('DOMContentLoaded', function() { const userInstructionInput = document.getElementById('user-instruction'); const executeButton = document.getElementById('execute-btn'); const statusDiv = document.getElementById('status'); const currentUrlSpan = document.getElementById('current-url'); // 获取当前活动标签页的URL chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if (tabs[0]) { currentUrlSpan.textContent = new URL(tabs[0].url).hostname; } }); executeButton.addEventListener('click', async function() { const instruction = userInstructionInput.value.trim(); if (!instruction) { showStatus('请输入指令。', 'error'); return; } showStatus('正在分析页面并执行...', 'info'); executeButton.disabled = true; try { // 1. 获取当前标签页ID const [tab] = await chrome.tabs.query({active: true, currentWindow: true}); // 2. 向content script发送消息，获取页面状态 const pageStateResponse = await chrome.tabs.sendMessage(tab.id, {action: 'GET_PAGE_STATE'}); if (!pageStateResponse || !pageStateResponse.success) { throw new Error('无法获取页面状态。请刷新页面重试。'); } const pageState = pageStateResponse.state; // 3. 构建Prompt，调用LLM（这里模拟一个简单的本地逻辑，实际应调用API） // 模拟一个非常简单的规则引擎，代替真实的LLM调用 const aiResponse = simulateLLM(instruction, pageState); // 4. 执行AI返回的动作 if (aiResponse.action === 'CLICK' && aiResponse.selector) { await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: (selector) => { const el = document.querySelector(selector); if (el) { el.click(); return `已点击: ${selector}`; } else { throw new Error(`未找到元素: ${selector}`); } }, args: [aiResponse.selector] }); showStatus(`执行成功: ${aiResponse.reason}`, 'success'); } else if (aiResponse.action === 'TYPE' && aiResponse.selector && aiResponse.text) { await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: (selector, text) => { const el = document.querySelector(selector); if (el && (el.tagName.toLowerCase() === 'input' || el.tagName.toLowerCase() === 'textarea')) { el.value = text; el.dispatchEvent(new Event('input', { bubbles: true })); // 触发输入事件 return `已在 ${selector} 输入: ${text}`; } else { throw new Error(`无法向元素 ${selector} 输入文本。`); } }, args: [aiResponse.selector, aiResponse.text] }); showStatus(`执行成功: ${aiResponse.reason}`, 'success'); } else { showStatus(`AI返回了未知或无法执行的动作: ${JSON.stringify(aiResponse)}`, 'error'); } } catch (error) { console.error('执行出错:', error); showStatus(`出错: ${error.message}`, 'error'); } finally { executeButton.disabled = false; } }); // 模拟LLM的函数（实际项目中替换为真实的API调用） function simulateLLM(instruction, pageState) { // 这是一个极其简化的演示逻辑！ const elements = pageState.interactiveElements; const lowerInstruction = instruction.toLowerCase(); // 规则1：寻找包含“搜索”字样的输入框和按钮 if (lowerInstruction.includes('搜索')) { const searchInput = elements.find(el => (el.tagName === 'input' && (el.type === 'text' || el.type === 'search')) && (el.placeholder.toLowerCase().includes('搜索') || el.name.toLowerCase().includes('search')) ); const searchButton = elements.find(el => el.tagName === 'button' && el.text.toLowerCase().includes('搜索') ); if (searchInput && lowerInstruction.includes('输入')) { // 提取要搜索的词，这里简单处理 const match = instruction.match(/输入\s*["']?([^"']+)["']?/); const searchText = match ? match[1] : 'AI'; return { action: 'TYPE', selector: searchInput.selector, text: searchText, reason: `在搜索框输入“${searchText}”。` }; } else if (searchButton) { return { action: 'CLICK', selector: searchButton.selector, reason: '点击搜索按钮。' }; } } // 规则2：寻找提交按钮 if (lowerInstruction.includes('提交')) { const submitBtn = elements.find(el => (el.tagName === 'input' && el.type === 'submit') || (el.tagName === 'button' && (el.type === 'submit' || el.text.toLowerCase().includes('提交'))) ); if (submitBtn) { return { action: 'CLICK', selector: submitBtn.selector, reason: '点击提交按钮。' }; } } // 默认返回一个错误或等待指令 return { action: 'WAIT', reason: '无法理解指令，或未找到对应元素。' }; } function showStatus(message, type) { statusDiv.textContent = message; statusDiv.className = type; statusDiv.style.display = 'block'; setTimeout(() => { statusDiv.style.display = 'none'; }, 5000); } });

background.js在Manifest V3中是service worker，这里我们先实现一个简单的版本，用于未来扩展（如长时任务管理）：

// background.js chrome.runtime.onInstalled.addListener(() => { console.log('DOMSteer扩展已安装。'); }); // 可以在这里添加更多后台监听事件，例如监听所有标签页的更新等。

4.4 加载与测试

  1. 打开Chrome浏览器，进入chrome://extensions/。
  2. 开启右上角的“开发者模式”。
  3. 点击“加载已解压的扩展程序”，选择你的domsteer-demo文件夹。
  4. 扩展加载成功后，打开任何一个网页（例如百度）。
  5. 点击扩展图标，弹出控制窗口。
  6. 在文本框中输入“在搜索框输入人工智能，然后点击搜索按钮”（注意：我们的模拟LLM规则只识别“搜索”和“输入”关键词，且对选择器匹配很粗糙）。
  7. 点击“执行指令”。如果页面元素能被我们简单的规则匹配到，你会看到搜索框被填入了文字。

重要提示：这只是一个极度简化的原型。simulateLLM函数是硬编码的规则，非常脆弱。真实系统中，这里必须替换为调用真实的LLM API（如OpenAI、Anthropic或本地部署的模型），并设计复杂的Prompt和结果解析逻辑。

5. 进阶实现：集成真实LLM与健壮化

要让DOMSteer真正可用，必须用真实的LLM替换掉我们简陋的规则引擎，并大幅提升各个模块的健壮性。

5.1 集成OpenAI API示例

修改popup.js中的simulateLLM函数，改为真实的API调用。你需要一个OpenAI API密钥。

// 在popup.js顶部添加你的API密钥（注意：前端明文存储密钥不安全，生产环境必须通过后台服务中转） const OPENAI_API_KEY = 'sk-your-api-key-here'; // 警告：仅为演示，实际应通过后台服务代理 async function callRealLLM(instruction, pageState) { const prompt = ` 你是一个网页操作自动化助手。你的任务是根据用户指令和当前网页的状态，决定下一步对哪个DOM元素执行什么操作。 当前网页URL: ${pageState.url} 网页标题: ${pageState.title} 当前页面上的可交互元素（按重要性排序）: ${JSON.stringify(pageState.interactiveElements, null, 2)} 用户指令: "${instruction}" 请严格按照以下JSON格式输出你的决策： { "thought": "你的思考过程，分析用户意图和页面元素。", "action": "动作类型，只能是以下之一：CLICK, TYPE, SELECT, SCROLL_UP, SCROLL_DOWN, WAIT, FINISH", "selector": "CSS选择器字符串，用于唯一标识目标元素（仅CLICK/TYPE/SELECT动作需要）。", "text": "需要输入的文本内容（仅TYPE动作需要）。", "reason": "简短说明选择这个动作和元素的理由。" } 注意： 1. 选择器必须从上面提供的“interactiveElements”列表的“selector”字段中精确选取。 2. 如果用户指令已完成或无法理解，动作设为“FINISH”。 3. 确保你的输出是且仅是一个合法的JSON对象。 `; try { const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${OPENAI_API_KEY}` }, body: JSON.stringify({ model: 'gpt-4o-mini', // 或 gpt-4-turbo messages: [{ role: 'user', content: prompt }], temperature: 0.1, // 低随机性，保证输出稳定 max_tokens: 500 }) }); if (!response.ok) { throw new Error(`API请求失败: ${response.status}`); } const data = await response.json(); const content = data.choices[0]?.message?.content?.trim(); // 尝试从返回内容中解析JSON const jsonMatch = content.match(/```json\n?([\s\S]*?)\n?```/) || content.match(/{[\s\S]*}/); const jsonString = jsonMatch ? jsonMatch[1] || jsonMatch[0] : content; return JSON.parse(jsonString); } catch (error) { console.error('调用LLM失败:', error); return { action: 'WAIT', reason: `LLM处理失败: ${error.message}` }; } } // 然后在按钮点击事件中，用 `callRealLLM` 替换 `simulateLLM`

5.2 健壮化改进要点

  1. 选择器生成：使用稳健的库（如jquery的$.fn.getPath思路或开源库unique-selector）生成唯一且稳定的CSS选择器，能抵抗DOM微小变化。
  2. 元素状态验证：在执行动作前，再次检查元素是否存在、是否可见、是否可交互。因为从获取状态到执行动作之间，页面可能已发生变化。
  3. 动作重试与回退策略：如果点击后页面没有预期变化（如跳转或DOM更新），应能设定超时和重试机制，或尝试备用选择器。
  4. 操作日志与回滚：记录每一步操作，在任务失败或用户撤销时，有可能进行回滚（虽然DOM操作回滚非常复杂）。
  5. Shadow DOM支持：现代Web组件大量使用Shadow DOM。需要递归遍历shadowRoot来获取内部的交互元素。
  6. 后台服务代理：将LLM API调用放在后台服务（background.js或独立的服务器）中，保护API密钥，并可以管理请求队列、缓存和错误重试。

6. 常见问题与实战避坑指南

在实际开发和测试中，我遇到了不少坑。这里总结一下，希望能帮你节省时间。

6.1 选择器稳定性：最大的痛点

问题：自动生成的CSS选择器非常脆弱。开发人员加个div、改个类名，选择器就失效了。解决思路：

  • 多属性组合：不要只依赖id或单个class。生成像input[name='email'].form-control[data-testid='signup-email']这样的复合选择器。
  • 使用相对定位：如果目标元素没有稳定属性，尝试用其邻近的、有稳定属性的兄弟或父元素进行相对定位，例如：#stable-header + div > .target-button。
  • 备用选择器列表：为同一个元素生成2-3个不同优先级的备选选择器。主选择器失败时，按顺序尝试备选。
  • 视觉定位作为最后手段：在DOM选择器全部失效时，可以回退到计算元素的相对位置（如“距离顶部100px，左侧200px”），但这是下策，兼容性差。

6.2 处理动态加载与SPA

问题：页面内容通过Ajax或前端框架动态加载，初始的DOM抓取会遗漏这些内容。解决方案：

  • MutationObserver监听：在content.js中设置MutationObserver，监听整个document或特定容器的子节点、属性变化。当检测到新增的交互元素时，更新页面状态缓存，并通知智能体。
  • 主动等待策略：在AI的动作序列中，加入显式的WAIT动作，直到某个特定元素出现或某个条件满足。例如，点击“加载更多”后，等待新的商品卡片元素出现。

6.3 AI的“幻觉”与指令解析错误

问题：LLM可能会“捏造”一个不存在的选择器，或者误解用户指令。缓解措施：

  • 严格的输出约束：在Prompt中强制要求AI必须从提供的元素列表里选择，并严格限定输出格式。使用JSON Schema或类似技术描述输出。
  • 后置验证：在执行前，用document.querySelectorAll验证选择器。如果返回结果不为1（不是唯一匹配），则拒绝执行，并将错误信息反馈给AI，要求它重新决策。
  • 分步确认（高风险操作）：对于删除、付款、提交重要表单等操作，不要完全自动化。可以设计为AI高亮目标元素，由用户手动点击确认。

6.4 性能优化

问题：频繁抓取和发送整个页面的交互元素列表，数据量大，影响性能和LLM的Token消耗。优化方案：

  • 增量更新：利用MutationObserver只发送发生变化的那部分DOM元素。
  • 智能过滤：进一步过滤元素。例如，只关注视口（viewport）内的元素，或者重要性分数高于某个阈值的元素。
  • 页面分区：将页面划分为几个逻辑区域（如导航栏、侧边栏、主内容区），一次只分析和处理一个区域。
  • 本地轻量模型：对于简单的意图识别（如“点击下一个”、“提交”），可以先尝试用本地规则或小模型处理，复杂指令再上大模型。

7. 应用场景与未来展望

DOMSteer这类技术打开了一扇新的大门，其应用远不止于简单的自动化脚本。

7.1 核心应用场景

  • 复杂工作流自动化：跨多个系统（如CRM、ERP、OA）的数据录入与同步，处理需要大量点击和条件分支的日常任务。
  • 无障碍辅助：为视障或行动不便的用户提供强大的语音或手势控制网页的能力，AI理解指令后直接操作DOM，比传统的屏幕阅读器更主动、更智能。
  • 软件测试与QA：自动生成和执行端到端（E2E）测试用例。测试人员只需用自然语言描述测试场景，AI就能执行并报告结果。尤其适合测试UI频繁变化的敏捷开发。
  • 实时操作指导与辅助：集成到客服或培训系统。新员工在操作复杂系统时，AI助手可以实时高亮下一步该点的按钮，并自动填写部分字段。
  • RPA的增强：与传统RPA工具结合。RPA负责流程调度和桌面级操作，DOMSteer负责处理Web应用中那些难以用图像识别或固定坐标搞定的部分。

7.2 技术演进方向

  • 多模态融合：单纯的DOM信息有时不足以理解UI（比如一个图形化的图表）。未来需要融合视觉信息（截图）和DOM信息，让AI对界面的理解更接近人类。
  • 记忆与学习能力：智能体应该能记住过去操作过的页面结构和成功路径，形成“经验”。再次遇到类似页面时，可以更快更准地操作，实现持续学习。
  • 更自然的交互：从单轮指令发展到多轮对话。用户可以说“不对，不是那个，是下面那个蓝色的链接”，AI能理解并修正。
  • 标准化与开源：出现类似“网页操作指令集”的标准化描述语言，以及开源的、针对不同前端框架（React, Vue, Angular）优化的DOM语义化提取库，降低实现门槛。

DOMSteer的理念，是让AI从“旁观的分析者”变为“沉浸的操作者”。这条路还很长，挑战很多，从选择器的稳定性到AI决策的可靠性，每一个环节都需要深耕。但它的潜力是巨大的——它试图用机器理解的方式，去桥接人类模糊的自然语言意图与机器精确的结构化操作之间的鸿沟。我实现的这个demo只是一个起点，希望它能为你提供一个清晰的思路和可行的起点。