【必看教程】从零构建浏览器Agent：AI驱动的网页自动化实现原理

文章介绍浏览器Agent的SPADE流程实现原理，结合Playwright的浏览器控制能力和多模态AI的视觉理解能力。传统方法依赖CSS选择器易失效，而Agent能像人一样"看懂"页面并执行操作。最佳实践是混合驱动模式：用传统脚本处理90%确定性流程，仅在关键节点调用AI处理不确定性，实现速度与智能的最佳结合。

模型优化师

695人浏览 · 2025-11-16 07:00:00

模型优化师 · 2025-11-16 07:00:00 发布

前言

昨天flowith刚发布了他们的浏览器Agent，这个方向已经出了好几款产品了，Dia、Comet、atlas等。今年早些时候也在研究这块，今天在这里分享一下这类Agent的底层实现原理。

核心原理

传统自动化的问题： CSS选择器脆弱，前端一改就失效。

核心解决方案：

用Playwright扫描页面 → 找出所有可交互元素（按钮、输入框等）
给元素编号+画红框 → 生成带标注的截图
发给多模态AI → 同时给它三样东西：用户指令 + 元素JSON数据 + 标注截图
AI返回决策 → 告诉你要操作哪个元素（通过编号）
Playwright执行 → 直接用之前保存的ElementHandle操作，不重新查询

为什么有效：

AI能"看懂"页面（像人一样），不依赖固定选择器
Playwright提供精确的底层控制能力
两者结合 = 智能决策 + 稳定执行

人类说："帮我点击登录按钮"           ↓AI看截图："哦，是那个红框标着#5的蓝色按钮"           ↓Playwright：直接操作元素#5的ElementHandle

不需要写 page.click('.login-btn-class-v2-new') 这种会过期的代码。

核心思路是：把Playwright的浏览器控制能力和多模态AI的视觉理解能力结合起来。整个工作流程可以总结为SPADE（扫描、探测、标注、决策、执行）。下面直接上代码，看看怎么实现。

不过如果纯Agent也有一些问题，针对现在的场景话：

对于偶尔操作：AI的“思考延迟”远高于手动，确实不如自己点点点快。
对于高频、固定流程：传统的RPA脚本更快、更稳定、成本更低。

这项技术的真正价值在于 “混合驱动” 模式：

用高效的传统脚本处理90%的确定性流程，仅在最关键、最易变、需要做决策的10%的节点上，调用AI来处理不确定性。

这种方法能打造出 既快（脚本保障）又稳（AI兜底） 的自动化方案，实现了速度与智能的最佳结合。

比如自动发小红书的操作截图：

从"指令式"到"意图式"

传统做法：page.click('#submit-btn') ← 必须知道准确的选择器我们的目标：帮我提交这个表单 ← 只需要说清楚意图

要实现这个转变，Agent需要：

识别页面上有哪些可交互元素
理解每个元素的作用
把用户意图和具体元素对应起来
执行操作

系统架构

用户指令   ↓Agent调度器  ↓Playwright扫描页面 + 标注元素  ↓AI看截图 + 读数据 → 做决策  ↓Playwright执行操作  ↓循环或结束

三个核心模块：

Playwright控制器：相当于Agent的"手"和"眼睛"，负责操作浏览器、提取DOM信息、截图
多模态AI：相当于Agent的"大脑"，理解用户意图，分析页面内容，做决策
调度器：协调上面两者，编排整个流程

SPADE流程详解

环境准备：

npm init -ynpm install playwrightnpx playwright install

1. Scan & Probe（扫描+探测）

找出所有可交互元素，为每个元素建立"档案"。

import { chromium, Page, ElementHandle } from 'playwright';interface InteractiveElement {  id: number;  dom: {    tag: string;    attributes: { [key: string]: string };  };  text: string;  boundingBox: {    x: number;    y: number;    width: number;    height: number;  };  elementHandle: ElementHandle;}async function scanAndProbe(page: Page): Promise<InteractiveElement[]> {  const interactiveSelector = [    'a', 'button', 'input:not([type="hidden"])', 'textarea',    'select', '[role="button"]', '[role="link"]', '[onclick]'  ].join(', ');  const elements = await page.locator(interactiveSelector).elementHandles();  const elementInfos: InteractiveElement[] = [];  let counter = 1;  for (const el of elements) {    if (!(await el.isVisible())) continue;        const box = await el.boundingBox();    if (!box) continue;    const tag = await el.evaluate(node => node.tagName.toLowerCase());    const text = await el.innerText();    const attributes = await el.evaluate(node => {      const attrs: { [key: string]: string } = {};      for (const attr of node.attributes) {        attrs[attr.name] = attr.value;      }      return attrs;    });    elementInfos.push({      id: counter++,      dom: { tag, attributes },      text: text.trim().substring(0, 100),      boundingBox: box,      elementHandle: el,    });  }  return elementInfos;}

关键点：

用一个宽泛的选择器覆盖大部分可交互元素
过滤掉不可见元素
保存ElementHandle引用，后续直接操作，不用重新查询

2. Annotate（标注）

在页面上给每个元素画红框+编号，让AI能看清楚。

async function annotatePage(page: Page, elements: InteractiveElement[]): Promise<void> {  const annotations = elements.map(el => ({    id: el.id,    box: el.boundingBox,  }));  await page.evaluate((annotations) => {    const oldOverlay = document.getElementById('spade-overlay');    if (oldOverlay) oldOverlay.remove();    const overlay = document.createElement('div');    overlay.id = 'spade-overlay';    overlay.style.cssText = `      position: absolute; top: 0; left: 0;       width: 100%; height: ${document.body.scrollHeight}px;      z-index: 2147483647; pointer-events: none;    `;    for (const ann of annotations) {      const box = document.createElement('div');      box.style.cssText = `        position: absolute;        left: ${ann.box.x}px; top: ${ann.box.y}px;        width: ${ann.box.width}px; height: ${ann.box.height}px;        border: 2px solid red; box-sizing: border-box;      `;      const label = document.createElement('div');      label.innerText = String(ann.id);      label.style.cssText = `        position: absolute; top: -20px; left: 0;        background: red; color: white; padding: 2px 4px;        font-size: 14px; border-radius: 3px;      `;            box.appendChild(label);      overlay.appendChild(box);    }    document.body.appendChild(overlay);  }, annotations);}

pointer-events: none 很重要，保证标注层不会干扰页面交互。

3. Decide（决策）

把截图+元素数据发给AI，让它决策要操作哪个元素。

async function askAIForDecision(  task: string,   annotatedScreenshot: Buffer,   elements: InteractiveElement[]): Promise<{ action: 'click' | 'fill' | 'select', elementId: number, value?: string }> {    const prompt = `你是Web自动化Agent。根据用户指令，从截图中选择一个元素并决定操作类型。用户指令: "${task}"可交互元素信息:${JSON.stringify(elements.map(el => ({   id: el.id,   tag: el.dom.tag,   text: el.text,   attributes: el.dom.attributes })), null, 2)}截图中红框和数字标出了每个元素的位置。返回JSON格式:- "action": "click", "fill", 或 "select"- "elementId": 元素ID- "value": 如果是fill操作，这里是输入内容示例: { "action": "fill", "elementId": 5, "value": "playwright" }  `;  const screenshotBase64 = annotatedScreenshot.toString('base64');  // 实际调用OpenAI GPT-4V或其他多模态模型  // const response = await fetch('https://api.openai.com/v1/chat/completions', {  //   method: 'POST',  //   headers: {  //     'Content-Type': 'application/json',  //     'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`  //   },  //   body: JSON.stringify({  //     model: "gpt-4-vision-preview",  //     messages: [{  //       role: "user",  //       content: [  //         { type: "text", text: prompt },  //         { type: "image_url", image_url: { url: `data:image/png;base64,${screenshotBase64}` }}  //       ]  //     }]  //   })  // });  // 模拟AI返回（实际项目中替换为真实API调用）  if (task.includes("输入")) {    const input = elements.find(el => el.dom.tag === 'input');    if (input) return { action: 'fill', elementId: input.id, value: 'Playwright' };  }  if (task.includes("点击")) {    const button = elements.find(el => el.dom.tag === 'button' || el.text.includes('搜索'));    if (button) return { action: 'click', elementId: button.id };  }  throw new Error("无法决策");}

关键：

同时给AI文本指令、结构化数据(JSON)和视觉信息(截图)
Prompt要清晰定义输入输出格式
实际项目中接入GPT-4V或Gemini等多模态模型

4. Execute（执行）

根据AI决策执行操作。

async function executeDecision(  decision: { action: 'click' | 'fill' | 'select', elementId: number, value?: string },  elements: InteractiveElement[]): Promise<void> {  const target = elements.find(el => el.id === decision.elementId);  if (!target) throw new Error(`找不到元素 #${decision.elementId}`);  const handle = target.elementHandle;  console.log(`执行: ${decision.action} on #${decision.elementId}`);  switch (decision.action) {    case 'click':      await handle.click();      break;    case 'fill':      if (!decision.value) throw new Error('fill操作需要value');      await handle.fill(decision.value);      break;    case 'select':      // await handle.selectOption({ label: decision.value });      break;  }}

直接用之前保存的ElementHandle操作，比坐标点击快且稳定。

5. 完整流程

async function runAgentTask(page: Page, task: string) {  console.log(`\n开始任务: "${task}"`);    const elements = await scanAndProbe(page);  await annotatePage(page, elements);  const screenshot = await page.screenshot();  await page.evaluate(() => document.getElementById('spade-overlay')?.remove());  const decision = await askAIForDecision(task, screenshot, elements);  await executeDecision(decision, elements);  console.log(`任务完成`);}(async () => {  const browser = await chromium.launch({ headless: false });  const page = await browser.newPage();  await page.goto('https://www.google.com');  await runAgentTask(page, "在搜索框输入Playwright");  await page.waitForTimeout(1000);  await runAgentTask(page, "点击搜索按钮");  await page.waitForTimeout(3000);  await browser.close();})();

小结

Web自动化正在从"写死的脚本"转向"会思考的Agent"。

Playwright提供了稳定的底层能力
多模态AI提供了理解和决策能力

两者结合就能构建出真正智能的自动化系统。OpenAI也下场做Altas这类产品的出现说明这个方向已经开始落地了… 上面这套SPADE流程是个人觉得比较靠谱的实现方案，希望对你有帮助。

最后

为什么要学AI大模型

当下，⼈⼯智能市场迎来了爆发期，并逐渐进⼊以⼈⼯通⽤智能（AGI）为主导的新时代。企业纷纷官宣“ AI+ ”战略，为新兴技术⼈才创造丰富的就业机会，⼈才缺⼝将达 400 万！

DeepSeek问世以来，生成式AI和大模型技术爆发式增长，让很多岗位重新成了炙手可热的新星，岗位薪资远超很多后端岗位，在程序员中稳居前列。

在这里插入图片描述

与此同时AI与各行各业深度融合，飞速发展，成为炙手可热的新风口，企业非常需要了解AI、懂AI、会用AI的员工，纷纷开出高薪招聘AI大模型相关岗位。
在这里插入图片描述
最近很多程序员朋友都已经学习或者准备学习 AI 大模型，后台也经常会有小伙伴咨询学习路线和学习资料，我特别拜托北京清华大学学士和美国加州理工学院博士学位的鲁为民老师给大家这里给大家准备了一份涵盖了AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频 全系列的学习资料，这些学习资料不仅深入浅出，而且非常实用，让大家系统而高效地掌握AI大模型的各个知识点。