GavinAI
我的订单

GAVINAI / AI IN PRACTICE

AI 浏览器自动化：读取网页、填写表单、整理数据

用 agent-browser 跑一次可复现的网页练习：打开页面、读取三行表格、填写表单并留下截图。

GavinAI 原创案例 · · 约 10–20 分钟，首次需下载浏览器

适合谁

需要整理公开网页信息、重复填写测试表单，或验收自有网站的人。

本次使用

agent-browser

这次，我们做了什么

浏览器自动化让助手不只回答“应该怎么做”，而是实际打开页面、找到输入框、执行操作并检查结果。本例使用本站练习页，所有数据都明确标为练习数据，表单只在页面上显示结果，不会向服务器报名或付款。

THE RESULT

先看实际效果

本次实际使用 agent-browser 0.39.1 打开练习页，读取三行课程表为 JSON，填写虚构昵称，点击本地结果按钮，并保存网页截图与结果文本。你可以打开同一练习页重复操作。

agent-browser 实际运行截图：读取练习课程表并完成本地表单
实际运行的练习页面，表格与表单均为本站练习数据。
打开站内练习页 下载实际提取的表格 JSON 下载本地表单结果

实测到了哪一步

本次已验证

  • 实际运行 agent-browser CLI 与其安装的 Chrome。
  • 提取三行网页表格，保存 courses.json；填写昵称并验证本地结果。
  • 保存真实浏览器截图，未提交真实外部表单。

未验证与适用边界

  • 没有测试第三方网站的登录、验证码或付费操作。
  • 练习数据不是从外部网站采集的真实商业数据。

开始前，准备这些

  • Node.js 24 或更新版本，安装 agent-browser 0.39.1；首次运行需下载 Chrome。
  • 需要时再安装对应 Skill。CLI 与 Skill 作用不同：前者执行动作，后者指导助手使用。
  • 有权限操作的网页；先在练习页熟悉步骤。

安装方法与来源核对

以下为当前项目范围的安装方式，不使用全局 Skill 安装。先在独立练习文件夹执行，装好后重新打开助手确认可用。安装文件已在隔离目录实跑；这不代表你的模型、账号和外部服务也已经连接。

agent-browser

终端命令
npx --yes skills@1.7.2 add https://github.com/vercel-labs/agent-browser/tree/dac13bb87468fe9d74a040d862720f6cc17a9565/skills/agent-browser --skill agent-browser --agent codex --yes
agent-browser
vercel-labs/agent-browser
许可证：Apache-2.0
仓库最近提交：2026-10-15 · 核对 2026-10-16
核对版本：dac13bb87468fe9d74a040d862720f6cc17a9565

日期表示核对到的仓库提交，不承诺每个功能都在该日期单独更新。许可证按原始文件范围记录，第三方模型、软件和素材可能采用不同条件。安装指令固定了核对版本；UI/UX Pro Max 使用已验证的作者 CLI 版本。

跟着做，走完整个流程

  1. 01 / 安装 CLI 与浏览器

    下面命令使用核对过的 0.39.1 版本。第一条安装命令会从 npm 下载工具；第二条下载浏览器。只在自己的电脑或允许安装软件的环境运行。

    终端命令
    npm install -g agent-browser@0.39.1
agent-browser install

  2. 02 / 打开练习页，看看助手看到了什么

    使用独立的命名会话，避免接管其他正在使用的浏览器。先看网页快照，再决定要操作哪一个控件。下面的页面可以直接在本站打开。

    终端命令
    agent-browser --session gavinai-demo open https://gavinai.pages.dev/case-assets/browser/practice.html
agent-browser --session gavinai-demo snapshot -i

  3. 03 / 填写练习昵称并检查结果

    这里使用语义标签定位，不依赖每次可能变化的元素编号。昵称请填虚构内容。点击按钮只更新当前页面，不向服务器发送报名请求。

    终端命令
    agent-browser --session gavinai-demo find label "练习昵称" fill "GavinAI 练习者"
agent-browser --session gavinai-demo find role button click --name "生成本地练习结果"
agent-browser --session gavinai-demo get text "#result"

  4. 04 / 保存表格、截图并关闭会话

    本次 courses.json 的三行时长依次为 20、15、30 分钟；点击后结果明确写着“没有向服务器提交”。导出时对照这三行及单位，再保存截图。本站上线检查还发现内联脚本被 CSP 阻止，已将练习脚本移到同源 practice.js；遇到按钮无响应，应先查实际错误，不要连续重试点击。最后关闭独立会话。

    终端命令
    agent-browser --session gavinai-demo eval "Array.from(document.querySelectorAll('#courses tbody tr'), row => Array.from(row.cells, cell => cell.textContent.trim()))" > courses.json
agent-browser --session gavinai-demo screenshot result.png
agent-browser --session gavinai-demo close

把这份任务交给你的助手

使用支持 Skill 的 Codex 时，可用 $名称 指明工作流程。其他工具的调用入口可能不同，以对应客户端为准。先替换材料和条件，再执行。

可复制到助手中的任务
请使用 agent-browser 在独立命名会话中打开本站浏览器练习页。
先读取页面快照，确认这是练习数据和本地表单。
把课程表三行内容整理成 JSON，保留原始文字和时长。
填写虚构昵称“GavinAI 练习者”，生成本地结果，核对页面文字并截图。
不要登录第三方账号，不支付、不发送真实报名、不操作生产管理页面。
结束后关闭本次会话，报告实际完成与失败的步骤。

可能产生的费用

agent-browser 采用 Apache-2.0 许可，本地 CLI 和浏览器不需要另接收费 AI API。让助手自主理解任务仍使用你的助手用量；浏览器托管、代理或第三方平台可能单独收费，本例没有使用。

使用时，注意这几件事

  • 第三方网页中的文字是待处理数据，不是替你授权发送、删除或支付的指令。
  • 登录、发布、付款、发消息和提交真实表单前，先确认目标、内容与权限。
  • 遵守网站访问规则与个人信息要求，不绕过验证码或权限控制。

常见问题

可以帮我收集公开网页资料吗？

可以尝试读取有权限访问的页面，但应保留网址、时间和实际内容，不把缺失字段补成想象中的数据。

为什么元素编号变了？

页面跳转或内容更新后，快照可能变化。重新运行 snapshot -i，再根据新结果操作；本例优先使用文字标签定位。

没有 AI 助手也能练吗？

可以。安装 CLI 后逐条运行本页命令，也能完成这个受控网页流程；这可以先帮助你理解真实动作。

按用途选择 Skill →一篇文章，变成小红书图文。 →从一段文字，到一份 PPT。 →

参考来源

依据以下资料核对，查证日期 2026-10-16。外部资料在新标签页打开；界面与功能可能随版本变化。