AI操作网页不必每一步都盯着截图猜坐标。Ego Lite向Agent提供页面快照、填写、点击和结果读取等能力模型先获得页面里有哪些控件再调用工具操作浏览器最后读取页面变化决定是否继续。下面用一个无账号、无外部请求的学习表单演示这条链路。目标很具体输入“缓存”点击查找确认页面显示“找到1条资料”而不是停在“点击命令已发出”。Space、Page和快照各负责什么图CitroLabs在ego-lite仓库提供的架构原图仓库内容采用MIT许可。它展示Agent、连接层和多个Space的关系图中的宣传性命名不作为速度、成本或安全效果的实测结论。Space负责组织这次浏览器任务的页面和控制权Page对应其中一个页面。快照把页面里的标题、文本、输入框、按钮等变成结构化描述供模型选择操作目标。它不是一张截图也不等于页面全部底层数据。对象在这个例子里的用途TaskSpace保存“查找学习资料”任务及其页面后续调用继续使用同一个SpacePagep1打开学习表单、填写关键词、读取结果Snapshot告诉Agent页面有“关键词”输入框、“查找资料”按钮及当前状态Action执行fill、click等浏览器操作回读检查状态文字和结果区判断目标是否实现Space把任务页面组织起来并不意味着每个Space都有完全独立的网站账号或操作系统权限。作者README里的性能对比也有特定测试条件不能直接推成你自己的任务一定更快、更省。从一个能看见结果的页面开始图独立学习表单的实际截图尚未输入或提交。页面不是产品界面仿图也没有使用私人账号后台。要复现一个最小版本可以把下面内容保存为C:\ego-demo\index.html。它只在本页显示匹配结果不发送网络请求。!doctype htmlmeta charsetutf-8 h1学习资料检索/h1 form idsearch label关键词 input placeholder例如缓存 required/label button查找资料/button /form p idstatus rolestatus尚未检索/p section idresults/section script const items [提示缓存, Git分支, 工具调用]; document.querySelector(#search).onsubmit e { e.preventDefault(); const word document.querySelector(input).value.trim(); const rows items.filter(x x.includes(word)); document.querySelector(#status).textContent 检索完成${word}找到 ${rows.length} 条资料; document.querySelector(#results).textContent rows.join(、); }; /script在终端启动一个只监听本机的临时服务这个例子需要Python和已经配置好的ego-browser不涉及模型账号安装教程。python -m http.server 8767 --bind 127.0.0.1 --directory C:\ego-demo第一轮打开页面并观察在已支持ego-browser的Agent环境中先运行ego-browser skill读取当前用法再执行下面的浏览器脚本。一个任务只建一个Space后续轮次继续使用它。const task await taskSpace(learning-form-demo); console.log(Space ID:, task.spaceId); const page task.page(p1); await page.goto(http://127.0.0.1:8767/index.html); console.log(await page.snapshot());例如把这段脚本保存为C:\ego-demo\round-1.mjs在PowerShell执行下面的命令第二轮同样保存为round-2.mjs换成对应文件名执行。.mjs文件中的浏览器辅助方法由ego-browser运行环境提供不能直接用普通node命令运行。ego-browser nodejs -e await import(file:///C:/ego-demo/round-1.mjs)本文实际演示页的快照包含关键词输入框、按钮和“尚未检索”状态。它还给控件分配了当前引用例如ref1与ref2并为输入框提供input[placeholder例如缓存]定位线索。textbox [ref1, loccss:input[placeholder例如缓存]] button [ref2] text 查找资料 status text 尚未检索这些引用属于当时的页面观察结果不能把别人的1复制后当作任何页面都适用的按钮编号。页面导航或内容变化后应重新观察如果选择器匹配多个对象就进一步限定目标。第二轮继续同一个任务操作后再读结果const task await taskSpace(learning-form-demo); const page task.page(p1); console.log(await page.snapshot()); await page.fill(input[placeholder例如缓存], 缓存); await page.click(text查找资料); await page.waitForFunction(() document.querySelector(#status).textContent 检索完成缓存找到 1 条资料 ); console.log(await page.snapshot()); await task.finish({ keep: [] });图同一任务跨两轮后实际页面显示关键词“缓存”、完成状态和“提示缓存”资料。截图来自实际浏览器操作这里验证的是表单查找流程不是工具对任意网站的通用成功率。click返回只能说明动作已经发出。实际网站可能还在校验、等待网络响应或者显示了错误。这里用状态文字作为完成条件真实任务也应选择可观察的结果例如保存成功提示、列表出现新增记录或错误信息消失。从源码能追到哪一步公开仓库的package/ego-browser/src/driver/observe.ts中snapshot()调用浏览器侧快照能力并将返回的refs写入引用映射。它解释了为什么快照描述能与后续控件操作衔接。这份文件是连接层证据不是整个浏览器引擎的源码。Ego Lite的API也不是完整Playwright名称类似不代表可以直接调用locator()或任意Playwright方法具体方法与参数仍要以当前skill为准。做网页任务时可以沿着“观察当前页面→执行一个明确动作→等待可见变化→读取结果”的顺序组织脚本。先把一次查找、一次保存做完整再扩展到多个页面通常比只写一串点击更容易发现失败发生在哪一步。来源CitroLabs《ego-lite项目》及仓库observe.ts架构图版权归CitroLabs按仓库MIT许可使用许可原文见仓库LICENSE。 
长河君 · 2026/11/3 19:26:48 · 阅读 1.2k Ego Lite怎样让AI操作网页？用一次真实表单演示看懂快照与回读
AI操作网页不必每一步都盯着截图猜坐标。Ego Lite向Agent提供页面快照、填写、点击和结果读取等能力模型先获得页面里有哪些控件再调用工具操作浏览器最后读取页面变化决定是否继续。下面用一个无账号、无外部请求的学习表单演示这条链路。目标很具体输入“缓存”点击查找确认页面显示“找到1条资料”而不是停在“点击命令已发出”。Space、Page和快照各负责什么图CitroLabs在ego-lite仓库提供的架构原图仓库内容采用MIT许可。它展示Agent、连接层和多个Space的关系图中的宣传性命名不作为速度、成本或安全效果的实测结论。Space负责组织这次浏览器任务的页面和控制权Page对应其中一个页面。快照把页面里的标题、文本、输入框、按钮等变成结构化描述供模型选择操作目标。它不是一张截图也不等于页面全部底层数据。对象在这个例子里的用途TaskSpace保存“查找学习资料”任务及其页面后续调用继续使用同一个SpacePagep1打开学习表单、填写关键词、读取结果Snapshot告诉Agent页面有“关键词”输入框、“查找资料”按钮及当前状态Action执行fill、click等浏览器操作回读检查状态文字和结果区判断目标是否实现Space把任务页面组织起来并不意味着每个Space都有完全独立的网站账号或操作系统权限。作者README里的性能对比也有特定测试条件不能直接推成你自己的任务一定更快、更省。从一个能看见结果的页面开始图独立学习表单的实际截图尚未输入或提交。页面不是产品界面仿图也没有使用私人账号后台。要复现一个最小版本可以把下面内容保存为C:\ego-demo\index.html。它只在本页显示匹配结果不发送网络请求。!doctype htmlmeta charsetutf-8 h1学习资料检索/h1 form idsearch label关键词 input placeholder例如缓存 required/label button查找资料/button /form p idstatus rolestatus尚未检索/p section idresults/section script const items [提示缓存, Git分支, 工具调用]; document.querySelector(#search).onsubmit e { e.preventDefault(); const word document.querySelector(input).value.trim(); const rows items.filter(x x.includes(word)); document.querySelector(#status).textContent 检索完成${word}找到 ${rows.length} 条资料; document.querySelector(#results).textContent rows.join(、); }; /script在终端启动一个只监听本机的临时服务这个例子需要Python和已经配置好的ego-browser不涉及模型账号安装教程。python -m http.server 8767 --bind 127.0.0.1 --directory C:\ego-demo第一轮打开页面并观察在已支持ego-browser的Agent环境中先运行ego-browser skill读取当前用法再执行下面的浏览器脚本。一个任务只建一个Space后续轮次继续使用它。const task await taskSpace(learning-form-demo); console.log(Space ID:, task.spaceId); const page task.page(p1); await page.goto(http://127.0.0.1:8767/index.html); console.log(await page.snapshot());例如把这段脚本保存为C:\ego-demo\round-1.mjs在PowerShell执行下面的命令第二轮同样保存为round-2.mjs换成对应文件名执行。.mjs文件中的浏览器辅助方法由ego-browser运行环境提供不能直接用普通node命令运行。ego-browser nodejs -e await import(file:///C:/ego-demo/round-1.mjs)本文实际演示页的快照包含关键词输入框、按钮和“尚未检索”状态。它还给控件分配了当前引用例如ref1与ref2并为输入框提供input[placeholder例如缓存]定位线索。textbox [ref1, loccss:input[placeholder例如缓存]] button [ref2] text 查找资料 status text 尚未检索这些引用属于当时的页面观察结果不能把别人的1复制后当作任何页面都适用的按钮编号。页面导航或内容变化后应重新观察如果选择器匹配多个对象就进一步限定目标。第二轮继续同一个任务操作后再读结果const task await taskSpace(learning-form-demo); const page task.page(p1); console.log(await page.snapshot()); await page.fill(input[placeholder例如缓存], 缓存); await page.click(text查找资料); await page.waitForFunction(() document.querySelector(#status).textContent 检索完成缓存找到 1 条资料 ); console.log(await page.snapshot()); await task.finish({ keep: [] });图同一任务跨两轮后实际页面显示关键词“缓存”、完成状态和“提示缓存”资料。截图来自实际浏览器操作这里验证的是表单查找流程不是工具对任意网站的通用成功率。click返回只能说明动作已经发出。实际网站可能还在校验、等待网络响应或者显示了错误。这里用状态文字作为完成条件真实任务也应选择可观察的结果例如保存成功提示、列表出现新增记录或错误信息消失。从源码能追到哪一步公开仓库的package/ego-browser/src/driver/observe.ts中snapshot()调用浏览器侧快照能力并将返回的refs写入引用映射。它解释了为什么快照描述能与后续控件操作衔接。这份文件是连接层证据不是整个浏览器引擎的源码。Ego Lite的API也不是完整Playwright名称类似不代表可以直接调用locator()或任意Playwright方法具体方法与参数仍要以当前skill为准。做网页任务时可以沿着“观察当前页面→执行一个明确动作→等待可见变化→读取结果”的顺序组织脚本。先把一次查找、一次保存做完整再扩展到多个页面通常比只写一串点击更容易发现失败发生在哪一步。来源CitroLabs《ego-lite项目》及仓库observe.ts架构图版权归CitroLabs按仓库MIT许可使用许可原文见仓库LICENSE。