Page Agent：自动化测试的新范式，让AI替你点网页- 大数跨境

首页

Page Agent：自动化测试的新范式，让AI替你点网页

51Testing软件测试网

2026-08-24

导读：Page Agent基于LLM实现自然语言驱动浏览器自动化，无需写代码。详解原理、架构与日报系统增删改查实战，附完整Playwright脚本。

在 AI 大模型飞速发展的今天，浏览器自动化领域正迎来一场深刻的变革。本文将系统介绍 Page Agent 的原理与实践，带你感受“用自然语言做自动化测试”的全新范式。

§一、自动化测试的背景与痛点

1.1 自动化测试的发展历程

软件测试行业经历了从纯手工测试 → 脚本化自动化测试 → 数据驱动/关键字驱动 → AI 辅助测试的演进。Selenium、Appium、Playwright 等工具的出现，让“写脚本代替人点按钮”成为主流实践，自动化覆盖率也随之大幅提升。

然而，随着产品迭代速度越来越快，测试工程师们发现：自动化本身也越来越难维护。

1.2 传统自动化测试的核心痛点

痛点	具体表现
脚本维护成本高	UI 稍有变动（元素 ID、布局调整），大量脚本需要同步修改
学习门槛不低	Playwright/Selenium API 需要专门学习，非开发人员难以上手
用例描述与执行割裂	测试用例写在 Excel/Xmind，执行代码写在 py/ts 文件，两者长期不一致
动态页面识别难	异步加载、iframe 嵌套、Shadow DOM 等场景让元素定位变得脆弱
测试意图难以表达	代码表达的是“怎么做”，而非“做什么”，用例可读性差
回归效率低	每次版本迭代都要重新录制/修改脚本，成本与收益失衡

一句话总结：传统自动化测试“写得快、坏得也快”，维护成本已经超越了它带来的收益。今天介绍一款可以自动化操作的工具Page Agent，先介绍Page Agent的原理，再通过实践，以一个日报系统日报页面正常的业务流程为例，展示如何通过自然语言开展自动化流程。

§二、什么是 Page Agent？

2.1 概念定义

Page Agent（页面智能体）是一种基于大语言模型（LLM）驱动的浏览器自动化方案。它的核心思想是：

用自然语言描述你想做的事，让 AI 自主规划操作步骤并在真实浏览器中执行。

你不再需要写 page.locator('#submit').click()，而是直接说：

code

   "打开日报系统，新增一条今日工作内容为'完成登录模块自动化测试'的日报，然后提交。"
   
  

Page Agent 会理解你的意图、自主感知当前页面结构，并按步骤完成操作。

2.2 Page Agent 与传统自动化的对比

对比维度	传统自动化(Playwright/Selenium)	Page Agent
用例编写方式	代码（API 调用）	自然语言
元素定位依赖	CSS selector / XPath / 属性	视觉 + 语义理解
页面变更适应性	脆弱，需手动维护	较强，LLM 可自适应
上手门槛	需要编程基础	几乎零门槛
执行透明度	高（代码即文档）	中（步骤日志可查）
适合场景	高频、稳定、大量回归	探索测试、冒烟测试、快速验证

§三、Page Agent 的工作原理

3.1 整体工作流

用户输入自然语言指令

↓

LLM 理解意图 + 拆解任务

↓

Page Agent 感知当前页面（截图 / DOM）

↓

LLM 决策下一步操作（点击 / 输入 / 滚动 / 导航）

↓

浏览器执行操作

↓

重新感知页面（循环）

↓

任务完成 / 异常上报

3.2 核心技术支撑

① 多模态感知（Vision + DOM）

Page Agent 通过两种方式“读懂”页面：

截图视觉理解：对当前页面截图，交给具备视觉能力的 LLM（如 GPT-4V、Claude 3）识别界面元素、布局和文字内容。

DOM/Accessibility Tree 解析：提取页面的可访问性树（AX Tree），以结构化文本的形式描述页面中的可交互元素。

两种方式互补：视觉能处理纯图形界面，DOM 解析更精准定位元素。

② LLM 推理决策（ReAct 模式）

Page Agent 通常采用 ReAct（Reason + Act）框架：

code

   Thought: 当前页面有一个"新增"按钮，我需要点击它来创建新日报
   
   Action: click("新增")
   
   Observation: 弹出了一个表单，包含"标题"和"内容"两个输入框
   
   Thought: 需要在"内容"框中输入今日工作内容
   
   Action: fill("内容", "完成登录模块自动化测试")
   
   ...

这种“思考-行动-观察”循环，让 Agent 能够处理多步骤、有条件分支的复杂任务。

③ 工具调用（Tool Use / MCP）

Page Agent 通过工具调用的形式控制浏览器，常见工具包括：

工具名	作用
`navigate(url)`	导航到指定页面
`click(element)`	点击指定元素
`fill(element, text)`	在输入框中填入文字
`screenshot()`	截取当前页面截图
`get_dom()`	获取页面 DOM/AX Tree
`scroll(direction)`	页面滚动
`assert(condition)`	断言验证

其中，MCP（Model Context Protocol）是当前主流的工具协议规范，由 Anthropic 推出，已成为 AI Agent 与外部工具交互的行业标准之一。

§四、Page Agent 的框架结构

4.1 整体架构图

👤 用户层

自然语言指令 / 测试用例描述

↕

🧠 Agent 核心层

任务规划器 (Planner)

LLM 推理引擎 (GPT/Claude)

记忆/上下文管理模块

工具调用 (MCP / Function Call)

↕

🌐 浏览器控制层

Browser Driver（Playwright / Chrome DevTools）

📷 截图模块

🔍 DOM解析

⚡ 操作执行

↕

🎯 目标系统（被测网站）

日报系统 / OA / 业务系统…

4.2 各模块职责说明

模块	职责
任务规划器	将用户的高层目标拆解为可执行的子任务序列
LLM 推理引擎	根据当前页面状态，决策下一步最优操作
记忆/上下文管理	维护操作历史、中间状态，支持多步骤任务
Browser Driver	与浏览器底层交互，执行实际的点击、输入等操作
截图模块	定期截图，提供视觉上下文给 LLM
DOM 解析模块	提取可访问性树，精准定位可交互元素
操作执行模块	将 LLM 决策转化为浏览器 API 调用

§五、实践应用：以日报系统为例

5.1 环境准备：安装 Chrome 插件方式

方式一：离线CRX安装（推荐，国内无网络限制）

该方式规避谷歌应用商店无法访问问题，100%适配国内网络，步骤如下：

1下载官方离线包：前往 Page Agent GitHub Releases，下载最新版 Chrome 扩展 CRX/解压包；也可通过国内镜像站获取完整插件包。

2开启Chrome开发者模式：打开Chrome浏览器，地址栏输入 chrome://extensions/，开启页面右上角开发者模式。

3安装插件：将下载的 .crx 文件直接拖拽至扩展页面，弹窗点击「添加扩展程序」；若提示程序包无效，将后缀改为 .zip 解压，选择「加载已解压的扩展程序」，选中解压文件夹即可完成安装。

4验证安装：插件列表出现「Page Agent Ext」即为安装成功，固定插件至浏览器顶部方便使用。

方式二：谷歌应用商店安装（需外网环境）

网络通畅可直接访问官方应用商店安装，支持自动更新，插件官方唯一地址：

https://chrome.google.com/webstore/detail/page-agent-ext/akldabonmimlicnjlflnapfeklbfemhj

这种方式可以实现对话描述，提出你的需求，page agent 对你的需求进行分析并操作浏览器

5.2 实战：日报系统增删改查

下面以一个典型的日报系统（Web 端）为例，演示 Page Agent 如何完成增删改查四个核心操作。

⚠️ 注意：以下源码基于 browser-use 库（Python），日报系统 URL 请替换为你的实际地址。

在对话窗口中收入我的操作

code

   登录用户名密码：xxxxx xxxx ，登录成功后 报告管理 -日报管理 ，新增一条日报（其中项目名称是下拉列表选择一条即可，项目名称选择其他，作业时长8，输入当日总结内容，输入明日计划内容，点击保存保存成功），修改日报，删除日报 在一条记录上操作 进行测试，其中项目名称是下拉列表选择一条即可，全部操作完成后 生成playwright 自动化脚本
   
  

操作过程如下图

此时Page Agent 会根据窗口中的文字要求进行操作，过程如下：

5.2.1 LLM 会把我的话拆成可执行步骤：

1打开系统登录页

2输入用户名：xxxxx

3输入密码：xxxx

4点击登录

5进入左侧菜单：报告管理 → 日报管理

6点击【新增】按钮

7项目名称下拉框 → 选择【其他】

8作业时长输入：8

9当日总结输入内容

10明日计划输入内容

11点击【保存】

12找到刚新增的那条日报

13点击【修改】

14修改内容后保存

15点击【删除】

16确认删除

17任务完成

5.2.2 页面感知 Page Agent 读取当前页面 DOM：

看到用户名输入框

看到密码输入框

看到登录按钮

看到菜单、按钮、表格、弹窗、下拉框

5.2.3 LLM决策执行

执行界面如下图

5.2.4 完整测试套件（串行执行）

python · 测试套件

   # ==========================================
   
   # 完整的日报系统 CRUD 测试套件
   
   # 按顺序执行：新增 → 查询 → 修改 → 删除
   
   # ==========================================
   
   import asyncio
   
   from playwright.async_api import async_playwright
   
   asyncdef main():
   
   asyncwith async_playwright() as p:
   
   browser = await p.chromium.launch(headless=False)
   
   page = await browser.new_page()
   
   # 1. 访问登录页面
   
   await page.goto('http://47.95.2.202/report/login?redirect=%2Findex')
   
   # 2. 登录操作
   
   await page.fill('input[placeholder="账号"]', 'xxxx')
   
   await page.fill('input[placeholder="密码"]', 'xxxx')
   
   await page.click('button[type="button"]')
   
   await page.wait_for_load_state('networkidle')
   
   # 3. 进入报告管理 - 日报管理
   
   await page.click('li[role="menuitem"]:has-text("报告管理")')
   
   await page.click('li[role="menuitem"]:has-text("日报管理")')
   
   await page.wait_for_load_state('networkidle')
   
   # 4. 新增日报
   
   await page.click('button:has-text("新增")')
   
   await page.wait_for_timeout(500)
   
   # 选择项目名称（选择"其他"）
   
   await page.click('.el-select-dropdown__item:has-text("其他")')
   
   # 输入作业时长
   
   await page.fill('input[role="spinbutton"]', '8')
   
   # 输入当日总结
   
   await page.fill('textarea[placeholder="请输入当日总结"]', '今日完成系统功能测试，包括日报新增、修改、删除操作验证')
   
   # 输入明日计划
   
   await page.fill('textarea[placeholder="请输入明日计划"]', '继续进行系统功能优化和测试验证')
   
   # 保存新增
   
   await page.click('button:has-text("保存")')
   
   await page.wait_for_timeout(1000)
   
   # 5. 修改日报
   
   await page.click('button:has-text("修改")')
   
   await page.wait_for_timeout(500)
   
   # 修改项目名称
   
   await page.click('.el-select .el-input__inner')
   
   await page.click('.el-select-dropdown__item:has-text("弓井下 - 资源数字化管理系统")')
   
   # 修改作业时长
   
   await page.fill('input[role="spinbutton"]', '6')
   
   # 保存修改
   
   await page.click('button:has-text("保存")')
   
   await page.wait_for_timeout(1000)
   
   # 6. 删除日报
   
   await page.click('button:has-text("删除")')
   
   await page.wait_for_timeout(500)
   
   # 确认删除
   
   await page.click('.el-message-box__btns button:first-child')
   
   await page.wait_for_timeout(1000)
   
   print('所有操作执行完成！')
   
   await browser.close()
   
   if __name__ == '__main__':
   
   asyncio.run(main())

§六、总结与不足

6.1 Page Agent 的价值

降低自动化门槛：测试人员用自然语言描述用例，无需深入掌握 Playwright API

提升探索测试效率：AI 能自主发现可交互元素，覆盖人工容易遗漏的路径

减少脚本维护负担：页面 UI 小幅变更时，LLM 能自适应调整，不需立即改脚本

加速冒烟测试：新功能上线后，快速用自然语言描述验收标准，几分钟完成验证

6.2 当前明显不足

不足点	说明
稳定性不如传统脚本	LLM 每次决策存在随机性，同一任务多次执行可能路径不同，需要多次对话，关键过程描述的越精准，就不容易出错
脚本不完善	生成的脚本没有把每一个操作，尤其详细操作定位到，需要后续自行补充
无记忆功能	上下文之间，缺少理解性，与豆包和workbuddy 之间有很大区别，需要一次性把内容说清楚

......

本文节选自第九十一期《51测试天地》

原创文章

《Page Agent:让AI替你点网页-自动化测试的新范式》

文章后续为大家详细讲解了：

适用场景建议与未来展望

想继续阅读全文

或查看更多《51测试天地》的原创文章

请点击下方 阅读原文或扫描二维码 查看

声明：本文为51Testing软件测试网 M&T. 用户投稿内容，该用户投稿时已经承诺独立承担涉及知识产权的相关法律责任，并且已经向51Testing承诺此文并无抄袭内容。发布本文的用途仅仅为学习交流，不做任何商用，未经授权请勿转载，否则作者和51Testing有权追究责任。如果您发现本公众号中有涉嫌抄袭的内容，欢迎发送邮件至:editor@51testing.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

【声明】内容源于网络

51Testing软件测试网

博为峰51Testing软件测试网提供各种线上招聘、线上课程等网络服务，出版软件测试系列丛书及电子杂志，组织线上技术交流活动；同时还举办多种线下公益活动，如软件测试沙龙、软件测试专场招聘会等。

内容 3939

粉丝 0

51Testing软件测试网博为峰51Testing软件测试网提供各种线上招聘、线上课程等网络服务，出版软件测试系列丛书及电子杂志，组织线上技术交流活动；同时还举办多种线下公益活动，如软件测试沙龙、软件测试专场招聘会等。

总阅读2.8k

粉丝0

内容3.9k