让 AI 真正「看懂」网页：Memfit 浏览器自动化实践
原创
YAK
YAK
Yak Project
2026年6月26日 17:05
湖南
在小说阅读器读本章
去阅读
本文分享 Yaklang 项目中 AI Agent 驱动浏览器完成 Web 操作的设计思路与实战经验。
一、背景与整体架构
传统浏览器自动化面向程序员——写选择器、处理等待、维护脚本。AI Agent 面对的是自然语言任务（登录后台、验证越权、抓取内容），面临三个矛盾：页面如何被 AI 理解、元素如何被稳定定位、多轮对话如何维持浏览器会话。
在 Yakit 中的解法是插入一层 「AI可读」的浏览器中间件：无障碍树 Snapshot 供 AI 读结构，短 ref（@e1）供 AI 点元素，Session 让多次工具调用共享同一 Chrome。
| 层级 | 职责 |
| Agent | 拆解任务、选工具、读输出、决策下一步 |
| use\_browser | 统一 op 入口，翻译为浏览器操作 |
| browser 模块 | 实例管理、Snapshot、ref 映射、CDP 执行 |
| Chrome | 真实渲染与交互 |
二、核心原理
YAK
Snapshot + Ref：AI 读结构，不读像素
snapshot 返回的是 Accessibility Tree 文本，不是截图。可交互元素带 [ref=eN]，Agent 用 @e3 填表、@e5 点击，底层映射到 DOM 再经 CDP 执行。相比整页 HTML 更省 token，相比截图不依赖多模态模型。
YAK
交互循环与双策略
典型流程：open → snapshot → fill/click → 验证 → close。Agent 通过 Tool Call 间接驱动 Chrome；同一 session（默认 ai-browser）跨轮次复用 Cookie 与登录态。任务涉及浏览器时会加载 Skill（如 how-to-use-browser），注入操作策略。
| 策略 | 流程 | 适用 |
| A：Snapshot + Ref | open → snapshot → 用 ref 操作 → 变化后重 snapshot | 静态 HTML，首次 snapshot 有 ref |
| B：JavaScript 优先 | open → eval 探表/填表/提交 → eval 或 get 验证 | SPA、登录表单、snapshot 返回 0 ref |
铁律：0 ref 时不要反复 snapshot，立刻切 eval 或 CSS 选择器。
YAK
use\_browser 能力速览
单一工具，参数 op 选操作；target 支持 @eN 与 CSS 选择器。
| 类别 | op |
| 导航 | open back forward reload close |
| 感知 | snapshot screenshot get（含 cookies） |
| 交互 | click fill type hover drag select check uncheck setfiles scrollintoview press |
| 脚本 | eval wait |
| 标签 | tab\_list tab\_new tab\_switch tab\_close |
常用参数：url``target``value``js；可选 headless、timeout。iframe 内元素需 eval。
三、实战案例
YAK
案例 1：传统后台登录（Snapshot 策 略）
首先打开 Yakit 的 vulinbox 靶场：
然后在 Memfit 中输入提示词：使用浏览器帮我登陆``http://127.0.0.1:8787/jwt/safe-login，账号密码分别是admin/admin
发送提示词，观察浏览器，Memfit AI 会打开浏览器，输入账号密码，执行登陆，获取结果。
| 步骤 | 动作 |
| 1～4 | open → fill 用户名/密码 → click 登录 |
| 5～6 | get url / title 验证 → close |
小结：静态页 4～6 轮 tool call 可完成，上面这种事比较简单的登陆策略。
YAK
案例 2：AI 登录 → 导出 Cookie → Yak 脚本抓取
用户指令（原文）
帮我使用浏览器打开 https://movie.douban.com/ ，然后获取 Cookie 和 UA，再编写 Python 脚本，批量获取所有正在热映电影。
场景说明
豆瓣电影首页展示「正在热映」卡片，但列表较长、后续还可能翻页或跳转子页。若直接用 Python requests 裸请求，常因 缺少浏览器 Cookie、User-Agent 不像真实访问 而被限流或返回不完整内容。 本案例不需要账号登录，核心是：用真实 Chrome 访问一次，借浏览器建立「像人一样的」请求指纹，再把 Cookie + UA 交给脚本做批量 HTTP 抓取。
任务目标
- 打开 豆瓣电影，确认「正在热映」区块已加载
- 导出当前会话的 Cookie 与 User-Agent
- 生成并运行 Python 脚本，拉取全部正在热映条目
- 输出结构化结果（片名、评分、详情链接等）
为什么用「浏览器 + 脚本」混合
| 阶段 | 浏览器 | Yak 脚本 |
| 登录 / Cookie | ✅ | ❌ 通常需要人工逆向js |
| 批量分页 | ❌ 慢且费 token | ✅ 并发 HTTP |
实际运行时条目数随豆瓣首页热映排片变化；脚本目标是一次性覆盖当前全部热映项，而非仅首页可见的几张卡片。
结果
- 浏览器阶段：约 3～5 次 tool call（open → cookies → eval UA → 可选 html → close）
- 脚本阶段：秒级完成列表拉取与解析（视网络与条目数而定）
- 交付物：douban\_movie\_scraper.py、douban\_nowplaying.json、douban\_nowplaying.csv
经验小结
- 不必登录也要过浏览器：豆瓣这类站点即使用户未登录，仍建议先浏览器访问再抓 Cookie，比脚本裸奔稳定得多。
- Cookie + UA 成对使用：只抄 Cookie 不换 UA，或反之，都容易触发异常响应。
- 浏览器只跑一趟：热映列表的重复 GET 交给 Python，避免 Agent 对每个电影 ref 点一遍。
- 合规与频率：仅用于个人学习/内部分析时控制请求频率，遵守站点服务条款；Cookie 有时效，脚本失败时可让 Agent 重新
open刷新 Cookie。 - 脚本语言不限于 Yak：本例用户指定 Python；同一流程也可让 Agent 写 Yak 脚本，原理相同。
四、实践要点
YAK
与传统自动化对比
| 维度 | 传统脚本 | Memfit + use\_browser |
| 页面理解 | 手写选择器 | Snapshot 文本 + ref |
| 任务入口 | 代码 | 自然语言 + ReAct |
| SPA | wait + 选择器 | eval 兜底 |
| 会话 | 脚本变量 | session 跨 tool call |
| 典型场景 | QA / 开发 | 安全测试、Agent 编排 |
YAK
踩坑清单
1.snapshot ≠ 截图——要视觉确认用 screenshot。
2.0 ref 立刻换 JS 策略——勿空转 snapshot。
3.页面变化后 ref 必刷新。
4.长任务记得 close——释放 Chrome。
5.浏览器 vs HTTP——无登录态用 HTTP；登录、CSRF、Cookie 用浏览器；批量抓取用 Cookie + Yak 脚本（案例 4）。
总结
用 Snapshot 翻译页面结构，用 Ref 简化「点哪里」，用 Session 缝合多轮对话，用 eval 兜住 SPA——Tool 提供能力，Skill 提供策略，Agent 在上层决策。这不是取代 Playwright，而是为 LLM 作为操作者 重新设计的中间层。配合Yaklang 或 python 脚本可以最大程度上释放 AI 的安全能力。
END
YAK官方资源
Yak 语言官方教程：
https://yaklang.com/docs/intro/
Yakit 视频教程：
https://space.bilibili.com/437503777
Github下载地址：
https://github.com/yaklang/yakit
Yakit官网下载地址：
https://yaklang.com/
Yakit安装文档：
https://yaklang.com/products/download\_and\_install
Yakit使用文档：
https://yaklang.com/products/intro/
常见问题速查：
https://yaklang.com/products/FAQ
版权声明
本站仅做备份收录，仅供研究与教学参考之用。
读者将信息用于其他用途的，全部法律及连带责任由读者自行承担，本站不承担任何责任。
评论