如何在浏览器中构建 Web Agent

后端开发笔记

163人浏览 · 2026-05-24 23:55:26

后端开发笔记 · 2026-05-24 23:55:26 发布

如何在浏览器中构建 Web Agent：从原理到实战的完整指南

你是否每天都在重复着这些繁琐的网页操作？登录多个后台系统查看数据、手动填写几十份相同的表单、定时刷新商品页面监控价格、逐个复制粘贴新闻标题整理报表……这些工作不仅消耗大量时间，还容易因疲劳出错。如果有一个“智能助手”能代替你在浏览器中完成这些任务，那该多好？

这就是 Web Agent 的价值所在——它是一个能在浏览器环境中自主感知网页状态、做出智能决策、执行交互操作并完成特定任务的自动化实体。今天，我将带你从原理到实战，一步步构建一个属于自己的 Web Agent。

引言：为什么我们需要 Web Agent？
核心概念：什么是 Web Agent？
技术选型：选择合适的工具构建 Web Agent
准备工作：搭建开发环境
感知层实现：让 Agent“看见”网页
决策层实现：让 Agent“思考”下一步
执行层实现：让 Agent“动手”操作
项目实战：构建 AI 新闻助手 Web Agent
优化与调试：让 Agent 更稳定、更高效
行业发展与未来趋势
总结与下一步

1. 引言：为什么我们需要 Web Agent？

1.1 痛点引入：那些让你崩溃的网页操作

先来看几个真实的场景：

电商运营：你需要每天早上8点打开5个电商平台的后台，查看前一天的订单量、销售额、退换货数据，然后复制到Excel中汇总，生成日报——这个过程至少需要30分钟。
内容编辑：你要从10个科技网站上收集当天的人工智能相关新闻，逐个打开链接、复制标题和链接、整理成文档——一不小心就会漏掉重要新闻。
人力资源：公司校招收到了500份简历，你需要逐个登录招聘系统，把候选人的姓名、学校、专业、联系方式复制到公司的人才库中——重复的操作让你手酸眼痛。

这些场景的共同特点是：流程固定、重复度高、依赖网页交互。手动完成不仅效率低，而且容易出错，更重要的是——它们占用了你本该用来做更有价值工作的时间。

1.2 解决方案：Web Agent 登场

传统的解决方式是写“自动化脚本”——比如用Python写个爬虫，或者用Selenium模拟点击。但传统脚本有两个明显的缺点：

不够灵活：一旦网页结构变了，或者任务流程有小调整，脚本就会报错，需要重新修改代码。
不够智能：只能执行预设的规则，遇到“判断这个新闻是否和AI相关”“决定先点哪个按钮”这种需要思考的问题，传统脚本就无能为力了。

而 Web Agent 是传统自动化脚本的“升级版”——它结合了浏览器自动化技术和人工智能（尤其是大语言模型），不仅能执行操作，还能“理解”网页内容、“思考”任务流程、“适应”网页变化。

1.3 最终效果展示：我们要做的 AI 新闻助手

在本文的最后，我们将一起构建一个 AI 新闻助手 Web Agent，它能：

自动打开新浪科技新闻页面；
“看见”页面上的新闻列表，提取标题、链接和发布时间；
调用 GPT API“思考”哪些新闻是“人工智能相关”的；
自动翻页获取更多新闻；
把筛选后的结果保存为 JSON 文件。

整个过程不需要你手动操作，Agent 会自主完成——这就是 Web Agent 的魅力。

2. 核心概念：什么是 Web Agent？

在开始写代码之前，我们得先搞清楚 Web Agent 的本质——它是什么？由哪些部分组成？和传统工具有什么区别？

2.1 核心概念定义

我们可以这样定义 Web Agent：

Web Agent 是一种在浏览器环境中运行的自主实体，它能够通过感知网页状态（DOM、网络请求、用户事件等）获取信息，基于预设规则或AI模型做出决策，并通过模拟用户交互（点击、输入、导航等）执行操作，最终完成特定的任务目标。

这个定义里有三个关键词：自主、感知、决策、执行——这正是 Web Agent 的核心能力。

2.2 概念结构：Web Agent 的三层架构

一个完整的 Web Agent 通常由三层组成，我们可以用一个架构图来展示：

2.2.1 感知层（Perception Layer）：让 Agent“看见”和“听见”

感知层是 Web Agent 的“眼睛和耳朵”，它的作用是从浏览器和网页中获取信息。感知层的核心功能包括：

DOM 解析：获取网页的 HTML 结构，提取元素的文本、属性、位置等信息；
事件监听：监听页面加载、网络请求、弹窗、用户交互等事件；
状态获取：获取当前页面的 URL、Cookie、LocalStorage、屏幕截图等状态。

2.2.2 决策层（Decision Layer）：让 Agent“思考”

决策层是 Web Agent 的“大脑”，它的作用是根据感知到的信息，决定下一步该做什么。决策层有两种实现方式：

规则驱动：预先编写好规则（比如“如果看到登录按钮，就点击它”“如果标题包含‘AI’，就收集它”），Agent 严格按照规则执行；
AI 驱动：调用大语言模型（如 GPT-3.5/4、Claude）或其他 AI 模型，让模型“理解”感知到的信息，然后给出下一步的操作建议。

2.2.3 执行层（Action Layer）：让 Agent“动手”

执行层是 Web Agent 的“手脚”，它的作用是把决策层的指令转化为实际的浏览器操作。执行层的核心功能包括：

页面导航：打开新页面、跳转 URL、前进后退；
元素交互：点击按钮、输入文本、选择下拉框、上传文件；
页面操作：截图、滚动、刷新、关闭页面；
数据持久化：把收集到的数据保存到文件、数据库或发送到 API。

2.3 边界与外延：Web Agent vs 其他工具

很多人会把 Web Agent 和“爬虫”“RPA”“自动化测试脚本”搞混——我们需要把它们区分开。

工具/概念	核心目标	特点	与 Web Agent 的关系
网络爬虫（Spider）	批量抓取网页数据	侧重数据获取，不强调交互	爬虫是 Web Agent 的一个子集功能（感知层的一部分），Web Agent 更强调“交互+智能决策”
RPA（机器人流程自动化）	自动化跨系统的业务流程	覆盖桌面、浏览器等多场景	Web Agent 是专注于浏览器环境的 RPA
自动化测试脚本	验证网页功能是否正常	侧重断言和验证	Web Agent 可以用来做自动化测试，但用途更广
Web Agent	自主完成浏览器中的特定任务	感知+决策+执行，强调自主	我们要讲的主角

除了这些边界，Web Agent 的外延也在不断扩展：

多模态 Web Agent：结合 GPT-4V 等多模态模型，不仅能“看”文字，还能“看”网页中的图片、视频；
跨浏览器 Web Agent：能在 Chrome、Firefox、Safari 等多个浏览器中运行；
云端 Web Agent：部署在云端，24小时不间断运行；
Chrome 扩展 Web Agent：作为浏览器插件运行，更轻量、更易用。

2.4 概念之间的关系：对比与 ER 图

为了更清晰地理解 Web Agent 的概念，我们再看几个重要概念的对比，以及它们之间的 ER 图。

2.4.1 概念核心属性维度对比

我们把 Web Agent 的三层架构的核心属性列出来对比：

层级	核心目标	输入	输出	常用技术/工具
感知层	获取网页信息	浏览器、网页 DOM	结构化数据（文本、属性）	Puppeteer、Playwright、Cheerio
决策层	决定下一步操作	感知数据、任务目标	操作指令（点击、输入等）	规则引擎、LangChain、GPT API
执行层	执行浏览器操作	决策指令	浏览器状态变化	Puppeteer、Playwright、Selenium

2.4.2 概念联系的 ER 实体关系图

我们用 ER 图来展示 Web Agent 中各个实体之间的关系：

从这个 ER 图可以清楚地看到：

一个 Web Agent 包含感知层、决策层、执行层；
感知层使用 DOM 解析器和事件监听器；
决策层使用规则引擎和大语言模型；
执行层使用导航和元素交互工具；
Web Agent 在浏览器中运行，完成特定任务，浏览器渲染网页。

2.5 数学模型：决策过程的简单描述

虽然 Web Agent 的核心是工程实现，但我们可以用一个简单的数学模型来描述它的决策过程。

假设 Web Agent 在时刻 $t$ 的状态为 $s_t$ （这个状态是感知层从网页中获取的信息，比如当前页面的 DOM 结构、URL、历史操作记录等），Web Agent 的任务目标为 $G$ （比如“收集10条 AI 相关新闻”）。

决策层的作用就是根据当前状态 $s_t$ 和任务目标 $G$ ，选择一个动作 $a_t$ （比如“点击下一页”“提取新闻标题”等）。我们可以把决策过程表示为：

$a_t = \text{Policy}(s_t, G)$

其中 $\text{Policy}$ 就是策略函数——如果是规则驱动的 Web Agent，这个策略函数就是预先写好的 if-else 规则；如果是 AI 驱动的 Web Agent，这个策略函数就是大语言模型。

执行层执行动作 $a_t$ 后，浏览器的状态会变成 $s_{t+1}$ ，同时可能会得到一个奖励 $r_t$ （比如“成功收集到一条新闻”奖励+1，“操作失败”奖励-1）。Web Agent 会不断重复这个过程：

$s_0 \xrightarrow{a_0} s_1 \xrightarrow{a_1} s_2 \xrightarrow{a_2} \dots \xrightarrow{a_{n-1}} s_n$

直到状态 $s_n$ 满足任务目标 $G$ ，任务就完成了。

这个模型其实就是强化学习中的“马尔可夫决策过程（MDP）”——不过对于大多数 Web Agent 来说，我们不需要用到复杂的强化学习，用规则或大语言模型就足够了。

2.6 本章小结

在这一章里，我们搞清楚了 Web Agent 的核心概念：

Web Agent 是一种在浏览器中自主运行的实体，包含感知、决策、执行三层；
感知层负责获取网页信息，决策层负责决定下一步操作，执行层负责执行浏览器操作；
Web Agent 和爬虫、RPA、自动化测试脚本有联系，但也有明显的区别；
我们可以用一个简单的数学模型来描述 Web Agent 的决策过程。

现在我们已经理解了 Web Agent 的原理，接下来我们要选择合适的工具来构建它——这就是下一章的内容。

3. 技术选型：选择合适的工具构建 Web Agent

“工欲善其事，必先利其器”——构建 Web Agent 的第一步，就是选择合适的技术栈。目前主流的浏览器自动化工具有三个：Puppeteer、Playwright 和 Selenium。这一章我们就来对比这三个工具，然后选择一个最适合我们的。

3.1 主流浏览器自动化工具对比

我们从多个维度来对比这三个工具：

维度	Puppeteer	Playwright	Selenium
出品方	Google	Microsoft	Selenium 社区
发布时间	2017年	2020年	2004年
支持的浏览器	Chrome、Chromium、Edge（基于 Chromium）	Chrome、Firefox、Safari、Edge	Chrome、Firefox、Safari、Edge、IE
编程语言支持	Node.js（官方）、Python（社区）	Node.js、Python、Java、.NET（官方）	Java、Python、C#、JavaScript、Ruby
API 设计	简洁、链式调用，符合 JavaScript 习惯	简洁、异步友好，和 Puppeteer 类似	早期 API 较繁琐，新版有所改善
性能	高（和 Chrome DevTools 深度集成）	高（多浏览器优化）	中等（依赖 WebDriver）
社区活跃度	高（GitHub 85k+ stars）	高（GitHub 58k+ stars）	高（GitHub 29k+ stars）
文档完善度	高（官方文档详细，示例丰富）	高（官方文档详细，多语言示例）	高（文档齐全，社区资源多）
反爬检测规避	较好（可禁用自动化标识）	较好（内置反检测措施）	一般（较容易被识别为自动化工具）
AI 结合能力	好（Node.js 生态和 AI 工具结合好）	好（多语言支持，适合各种 AI 场景）	好（社区有很多 AI 结合的案例）

从这个对比表格可以看出：

如果你只需要支持 Chrome/Edge，追求简洁和高性能，Puppeteer 是一个很好的选择；
如果你需要支持多浏览器（比如 Firefox、Safari），或者需要多语言支持，Playwright 是更好的选择；
如果你需要支持旧版浏览器（比如 IE），或者项目已经用了 Selenium，那就继续用 Selenium。

3.2 我们的选择：Puppeteer + Node.js

在本文中，我们选择 Puppeteer + Node.js 作为我们的技术栈，原因如下：

简单易上手：Puppeteer 的 API 非常简洁，符合 JavaScript 的习惯，新手也能很快上手；
和 Chrome 深度集成：Puppeteer 是 Google 官方推出的，和 Chrome DevTools Protocol 深度集成，性能高，功能全；
Node.js 生态好：Node.js 有丰富的 npm 包，比如我们需要调用 OpenAI API 可以用 axios，处理环境变量可以用 dotenv，记录日志可以用 winston；
文档完善，示例多：Puppeteer 的官方文档非常详细，社区也有很多示例代码，遇到问题很容易找到解决方案。

当然，如果你更喜欢 Playwright，也完全可以——这两个工具的 API 非常相似，本文的代码稍微改一下就能用 Playwright 运行。

3.3 其他辅助工具

除了 Puppeteer，我们还需要一些辅助工具：

dotenv：用来管理环境变量（比如 OpenAI API Key），避免把敏感信息写在代码里；
axios：用来发送 HTTP 请求（比如调用 OpenAI API）；
winston：用来记录日志，方便调试和排查问题；
fs：Node.js 内置的文件系统模块，用来保存数据到文件。

这些工具我们会在后面的准备工作中安装。

3.4 本章小结

在这一章里，我们对比了三个主流的浏览器自动化工具：Puppeteer、Playwright 和 Selenium，并且选择了 Puppeteer + Node.js 作为我们的技术栈。选择的原因是 Puppeteer 简单易上手、和 Chrome 深度集成、Node.js 生态好、文档完善。

现在我们已经选好了工具，接下来我们要搭建开发环境——这就是下一章的内容。

4. 准备工作：搭建开发环境

在开始写代码之前，我们需要先搭建好开发环境——这一章我们就来一步步做。

4.1 环境要求

我们的开发环境需要满足以下要求：

操作系统：Windows 10+、macOS 10.15+ 或 Linux（Ubuntu 18.04+）；
Node.js：版本 18.0 或更高（因为 Puppeteer 需要较新的 Node.js 版本）；
浏览器：Chrome 或 Edge 最新版（Puppeteer 会自动下载 Chromium，所以你也可以不用手动安装）；
代码编辑器：VS Code（推荐）、WebStorm 或其他你喜欢的编辑器。

4.2 安装 Node.js

如果你还没有安装 Node.js，我们推荐用 nvm（Node Version Manager） 来安装——nvm 可以让你在一台电脑上安装多个 Node.js 版本，并且可以随时切换。

4.2.1 在 macOS 或 Linux 上安装 nvm

打开终端，运行以下命令：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

安装完成后，重启终端，然后运行以下命令验证 nvm 是否安装成功：

nvm --version

如果输出类似 0.39.5 的版本号，说明安装成功。

4.2.2 在 Windows 上安装 nvm

在 Windows 上，我们需要用 nvm-windows——你可以从 GitHub 上下载安装包：nvm-windows/releases。

下载最新的 nvm-setup.exe，双击安装，安装完成后打开 PowerShell 或 CMD，运行以下命令验证：

nvm version

4.2.3 用 nvm 安装 Node.js

安装好 nvm 后，我们可以用它安装 Node.js 18.x 版本：

nvm install 18

安装完成后，切换到这个版本：

nvm use 18

然后验证 Node.js 和 npm 是否安装成功：

node --version
npm --version

如果 Node.js 输出 v18.x.x，npm 输出 9.x.x，说明安装成功。

4.3 初始化项目

现在我们来创建一个新的项目目录，并且初始化 npm 项目。

4.3.1 创建项目目录

找一个你喜欢的地方，创建一个项目目录，比如叫 web-agent-tutorial：

mkdir web-agent-tutorial
cd web-agent-tutorial

4.3.2 初始化 npm 项目

在项目目录下运行以下命令，初始化 npm 项目：

npm init -y

这个命令会创建一个 package.json 文件，里面包含了项目的基本信息。

4.4 安装依赖

现在我们来安装项目需要的依赖：

npm install puppeteer dotenv axios winston

我们来解释一下每个依赖的作用：

puppeteer：浏览器自动化工具，核心依赖；
dotenv：用来加载 .env 文件中的环境变量；
axios：用来发送 HTTP 请求（比如调用 OpenAI API）；
winston：用来记录日志。

4.5 创建项目结构

为了让代码更清晰、更易维护，我们来创建一个合理的项目结构：

web-agent-tutorial/
├── .env                  # 环境变量文件（不要提交到 Git）
├── .gitignore            # Git 忽略文件
├── package.json          # npm 项目配置
├── package-lock.json     # npm 依赖锁定文件
├── web-agent.log         # 日志文件（自动生成）
├── ai_news.json          # 输出文件（自动生成）
└── src/                  # 源代码目录
    ├── index.js          # 入口文件
    ├── logger.js         # 日志配置
    ├── perception.js     # 感知层代码
    ├── decision.js       # 决策层代码
    └── action.js         # 执行层代码

我们来逐个创建这些文件：

4.5.1 创建 `.gitignore`

首先创建 .gitignore 文件，用来忽略一些不需要提交到 Git 的文件：

# 环境变量
.env

# 日志文件
*.log

# 输出文件
*.json

# Node.js
node_modules/
package-lock.json

# 操作系统
.DS_Store
Thumbs.db

4.5.2 创建 `.env`

然后创建 .env 文件，用来存放环境变量（比如 OpenAI API Key）：

# OpenAI API Key（需要去 OpenAI 官网申请）
OPENAI_API_KEY=your_openai_api_key_here

# 目标新闻网站 URL
NEWS_URL=https://tech.sina.com.cn/

# 最大翻页次数
MAX_PAGES=3

# 输出文件路径
OUTPUT_FILE=./ai_news.json

注意：你需要把 your_openai_api_key_here 换成你自己的 OpenAI API Key——如果你没有，可以去 OpenAI 官网申请。当然，如果你不想用 AI 功能，也可以跳过这一步，后面我们会讲规则驱动的方式。

4.5.3 创建 `src/logger.js`

接下来创建 src/logger.js，用来配置日志：

const winston = require('winston');

// 创建 logger 实例
const logger = winston.createLogger({
  // 日志级别：error > warn > info > verbose > debug > silly
  level: process.env.LOG_LEVEL || 'info',
  // 日志格式：时间戳 + 级别 + 消息
  format: winston.format.combine(
    winston.format.timestamp({
      format: 'YYYY-MM-DD HH:mm:ss'
    }),
    winston.format.printf(({ timestamp, level, message }) => {
      return `${timestamp} [${level.toUpperCase()}]: ${message}`;
    })
  ),
  // 日志输出：控制台 + 文件
  transports: [
    new winston.transports.Console(),
    new winston.transports.File({ filename: 'web-agent.log' })
  ]
});

module.exports = logger;

这个 logger 会把日志同时输出到控制台和 web-agent.log 文件中，方便我们调试。

4.5.4 创建其他空文件

最后，我们把 src/index.js、src/perception.js、src/decision.js、src/action.js 先创建为空文件，后面我们会逐步填充内容。

4.6 验证环境

现在我们来验证一下环境是否搭建成功——我们写一个简单的脚本，用 Puppeteer 打开百度，并且截图。

在 src/index.js 中写以下代码：

require('dotenv').config();
const puppeteer = require('puppeteer');
const logger = require('./logger');

async function main() {
  logger.info('开始启动浏览器...');
  
  // 启动浏览器（headless: false 表示显示浏览器窗口）
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null, // 不设置默认视口，让浏览器窗口最大化
    args: ['--start-maximized'] // 启动时最大化窗口
  });
  
  // 打开一个新页面
  const page = await browser.newPage();
  
  logger.info('正在打开百度...');
  // 导航到百度
  await page.goto('https://www.baidu.com', { waitUntil: 'networkidle2' });
  
  logger.info('正在截图...');
  // 截图保存为 baidu.png
  await page.screenshot({ path: 'baidu.png', fullPage: true });
  
  logger.info('截图完成，正在关闭浏览器...');
  // 关闭浏览器
  await browser.close();
  
  logger.info('任务完成！');
}

// 运行 main 函数
main().catch(error => {
  logger.error('任务执行出错:', error);
  process.exit(1);
});