用 ego-browser 驱动 XTwitter自动化页面结构、Anti-Click-Wrap 选择器与站点技能Site Skills实战【免费下载链接】ego-liteThe fastest browser for AI agents to run browser automation, built for sharing your logged-in browser state with your AI agents, like Codex or Claude Code, without disturbing you. Zero cost, zero config.项目地址: https://gitcode.com/GitHub_Trending/eg/ego-lite导读本文围绕 ego-browser 为 XTwitter沉淀的站点学习笔记 x-com/notes/overview.md 展开系统讲解如何用稳定的data-testid选择器识别 X 的页面骨架、规避点击被包装元素拦截的 Anti-Click-Wrap 问题并串联仓库中配套的时间线提取、用户搜索与聚焦推文提取工具最终落地为可直接运行的浏览器自动化脚本。读完本文你将掌握 X 站自动化中最关键的选择器体系、工具调用方式以及 ego-browser 站点技能Site Skills / Learnings从知识笔记到可执行工具的完整加载链路。X 站自动化的痛点与解法为什么需要学习笔记XTwitter是典型的高动态 SPA页面通过虚拟列表按需渲染、DOM 结构频繁变更、大量元素靠data-testid与 ARIA 角色标记而非稳定 class 组织。直接写死 CSS class 的自动化脚本往往在改版后立刻失效。ego-browser 的解法是把站点的 DOM 知识与可复用提取逻辑沉淀为结构化学习条目learning entry存放在learnings/site-id/目录下由运行时按域名自动匹配并注入 Agent。以 x-com 站点为例其学习条目目录为 skills/ego-browser/learnings/x-com/结构如下x-com/ ├── manifest.json # 站点清单域名、笔记、工具声明 ├── notes/ │ ├── overview.md # 页面结构与选择器知识本文主体 │ └── timeline.md # 时间线滚动与提取要点 ├── tools/ │ ├── timeline.js # Node 工具批量提取时间线推文 │ └── search-users.js # Node 工具搜索用户 └── browser-tools/ └── extract-post.js # 浏览器工具提取当前聚焦推文其中manifest.json声明了站点身份id: x-com、名称X (Twitter)覆盖域名x.com、*.x.com、twitter.com、*.twitter.com。从源码 check-domain-learning.ts 可以看出域名匹配支持*.x.com这类通配模式hostname.endsWith(.x.com)因此无论访问主域还是子域都能命中同一份学习资料。页面结构四块核心区域的>export async function getTimelinePosts(ctx, args {}) { const maxPosts boundedInteger(args.maxPosts, 50, 100); const posts await ctx.page .locator([data-testidtweet]) .evaluateAll((articles, limit) { return articles.slice(0, limit).map((el) ({ text: el.querySelector([data-testidtweetText])?.innerText?.trim() || , author: el.querySelector([data-testidUser-Name])?.querySelector(span)?.innerText?.trim() || , handle: el.querySelector([data-testidUser-Name])?.querySelector(a)?.getAttribute(href) || , timestamp: el.querySelector(time)?.getAttribute(datetime) || , })); }, maxPosts); return posts; }值得注意的实现细节boundedInteger把maxPosts限制在1100默认50防止一次拉取过多造成页面卡顿每条推文输出text、author、handle、timestamp四个字段handle取自User-Name内链接的href提取在page.evaluateAll的浏览器上下文中一次完成避免多次跨进程通信。关于置顶推文pinned posttimeline.md 明确指出置顶推文是时间线中第一个[data-testidtweet]只有位于时间线顶部时才需要跳过第一个元素来过滤它——滚动之后置顶推文会离开视口位置判断必须结合滚动状态。搜索用户searchUserssearch-users.js 对应 manifest 中search_users工具。它先用ctx.browser.openOrReuseTab打开https://x.com/search?fuserqqueryfuser限定用户搜索query 经encodeURIComponent编码再等待页面加载最后在浏览器端遍历[data-testidcellInnerDiv]提取用户卡片const users await ctx.page .locator([data-testidcellInnerDiv]) .evaluateAll((results) { return results .map((el) ({ name: el.querySelector([data-testidUser-Name] span)?.innerText?.trim() || , handle: el.querySelector([data-testidUser-Name] a)?.innerText?.trim() || , followers: el.querySelector([data-testidFollow])?.previousElementSibling?.innerText?.trim() || , })) .filter((u) u.name || u.handle); });粉丝数通过Follow 按钮的前一个兄弟元素间接获取这是 X 搜索结果卡片中一个相对稳定的布局约定最后用.filter丢弃空条目。浏览器端聚焦提取post_from_active_elementextract-post.js 是 manifest 中唯一的browserTools浏览器工具与 Node 工具不同它不持有ctx而是以纯浏览器脚本形式注入页面执行async function(args) { const el document.querySelector([data-testidtweet]:focus) || document.querySelector([data-testidtweet]); if (!el) return { error: no active tweet found }; return { text: el.querySelector([data-testidtweetText])?.innerText?.trim() || , author: el.querySelector([data-testidUser-Name] span)?.innerText?.trim() || , timestamp: el.querySelector(time)?.getAttribute(datetime) || , }; }逻辑优先取当前聚焦的推文:focus找不到再回退到第一个推文无推文时返回{ error: no active tweet found }。这与tweet根节点作为点击目标的设计呼应键盘/辅助技术聚焦到推文卡片后即可用该工具摘取当前上下文。站点技能的加载与调用链路知识笔记要变成 Agent 可用的能力依赖 index.ts 中实现的加载机制匹配siteSkillsForUrl(url)解析 URL 主机名遍历learnings/下各站点目录用domainMatches比对 manifest 中的domains含通配符装载知识loadLearnedContext读取命中的notes/*.md内容并为每个工具生成带调用示例的签名如await site.runTool(x-com, get_timeline_posts, { ... })执行 Node 工具runNodeSiteTool按 manifest 声明的pathcallable动态import工具模块并调用工具以(ctx, args)签名接收浏览器上下文注入浏览器工具loadBrowserToolSource读取脚本源码wrapBrowserTool将其包装为(async () { ... })(args)形式注入页面。其中路径校验index.ts强制工具的path必须是站点目录内的相对路径禁止..逃逸保证学习条目的沙箱边界。实战组合 SKILL.md 工作流驱动 X 自动化将上述知识放回 SKILL.md 定义的 heredoc 工作流中即可写出可运行的 X 自动化脚本。以打开时间线、滚动加载、批量提取推文为例ego-browser nodejs的 heredoc 脚本体内可直接使用内置 helperconst task await useOrCreateTaskSpace(scan x timeline) cliLog(task space id: task.id) await openOrReuseTab(https://x.com/home, { wait: true, timeout: 20 }) // 语义工作流先快照观察页面 cliLog(await snapshotText()) // 滚动加载更多推文虚拟列表懒加载 await scrollToBottomUntil( async () await js(String.rawdocument.querySelectorAll([data-testidtweet]).length) 20, { step: 900, wait: 1, maxSteps: 20 } ) // 浏览器端闭包一次性提取规避多次 js() 调用 const posts await js(String.raw(() { return [...document.querySelectorAll([data-testidtweet])].slice(0, 20).map(el ({ text: el.querySelector([data-testidtweetText])?.innerText?.trim() || , author: el.querySelector([data-testidUser-Name] span)?.innerText?.trim() || , ts: el.querySelector(time)?.getAttribute(datetime) || , })) })()) cliLog(JSON.stringify(posts, null, 2))关键要点回顾点击交互一律以[data-testidtweet]为点击目标遵循 Anti-Click-Wrap 约定提取在单个浏览器端闭包内完成避免多次await js()跨进程往返滚动用scrollToBottomUntil/page.mouse.wheel触发懒加载并感知虚拟列表的按需渲染特性提取作者、时间戳分别走User-Name span与time[datetime]若需过滤置顶推文仅在时间线顶部时跳过第一个tweet元素任务结束记得用completeTaskSpace(name, { keep })收尾。需要搜索用户时可复用站点技能中的既有工具思路直接打开https://x.com/search?fuserq关键词然后遍历[data-testidcellInnerDiv]提取User-Name与粉丝数。若希望后续任务自动获得这套 X 站点知识只需保证learnings/下 x-com 条目manifest notes tools位于 Agent 工作区可扫描的根目录即可运行时会在每次访问 x.com 域名时自动装载。结语XTwitter作为高动态 SPA其自动化关键在于稳定锚点的选择与点击目标的取舍。ego-browser 通过 x-com 学习条目 将AppTabBar/primaryColumn/tweet/tweetText等data-testid锚点、Anti-Click-Wrap 规避模式以及三个提取工具固化为可复用资产配合 learning 模块 的域名匹配与工具装载机制Agent 在访问 x.com 时即可自动获得这套站点知识。掌握本文的页面结构与工具实现你就能在自己的 ego-browser heredoc 脚本中稳定地完成 X 时间线扫描、推文提取与用户搜索等自动化任务。【免费下载链接】ego-liteThe fastest browser for AI agents to run browser automation, built for sharing your logged-in browser state with your AI agents, like Codex or Claude Code, without disturbing you. Zero cost, zero config.项目地址: https://gitcode.com/GitHub_Trending/eg/ego-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 ego-browser 驱动 X（Twitter）自动化：页面结构、Anti-Click-Wrap 选择器与站点技能（Site Skills）实战
用 ego-browser 驱动 XTwitter自动化页面结构、Anti-Click-Wrap 选择器与站点技能Site Skills实战【免费下载链接】ego-liteThe fastest browser for AI agents to run browser automation, built for sharing your logged-in browser state with your AI agents, like Codex or Claude Code, without disturbing you. Zero cost, zero config.项目地址: https://gitcode.com/GitHub_Trending/eg/ego-lite导读本文围绕 ego-browser 为 XTwitter沉淀的站点学习笔记 x-com/notes/overview.md 展开系统讲解如何用稳定的data-testid选择器识别 X 的页面骨架、规避点击被包装元素拦截的 Anti-Click-Wrap 问题并串联仓库中配套的时间线提取、用户搜索与聚焦推文提取工具最终落地为可直接运行的浏览器自动化脚本。读完本文你将掌握 X 站自动化中最关键的选择器体系、工具调用方式以及 ego-browser 站点技能Site Skills / Learnings从知识笔记到可执行工具的完整加载链路。X 站自动化的痛点与解法为什么需要学习笔记XTwitter是典型的高动态 SPA页面通过虚拟列表按需渲染、DOM 结构频繁变更、大量元素靠data-testid与 ARIA 角色标记而非稳定 class 组织。直接写死 CSS class 的自动化脚本往往在改版后立刻失效。ego-browser 的解法是把站点的 DOM 知识与可复用提取逻辑沉淀为结构化学习条目learning entry存放在learnings/site-id/目录下由运行时按域名自动匹配并注入 Agent。以 x-com 站点为例其学习条目目录为 skills/ego-browser/learnings/x-com/结构如下x-com/ ├── manifest.json # 站点清单域名、笔记、工具声明 ├── notes/ │ ├── overview.md # 页面结构与选择器知识本文主体 │ └── timeline.md # 时间线滚动与提取要点 ├── tools/ │ ├── timeline.js # Node 工具批量提取时间线推文 │ └── search-users.js # Node 工具搜索用户 └── browser-tools/ └── extract-post.js # 浏览器工具提取当前聚焦推文其中manifest.json声明了站点身份id: x-com、名称X (Twitter)覆盖域名x.com、*.x.com、twitter.com、*.twitter.com。从源码 check-domain-learning.ts 可以看出域名匹配支持*.x.com这类通配模式hostname.endsWith(.x.com)因此无论访问主域还是子域都能命中同一份学习资料。页面结构四块核心区域的>export async function getTimelinePosts(ctx, args {}) { const maxPosts boundedInteger(args.maxPosts, 50, 100); const posts await ctx.page .locator([data-testidtweet]) .evaluateAll((articles, limit) { return articles.slice(0, limit).map((el) ({ text: el.querySelector([data-testidtweetText])?.innerText?.trim() || , author: el.querySelector([data-testidUser-Name])?.querySelector(span)?.innerText?.trim() || , handle: el.querySelector([data-testidUser-Name])?.querySelector(a)?.getAttribute(href) || , timestamp: el.querySelector(time)?.getAttribute(datetime) || , })); }, maxPosts); return posts; }值得注意的实现细节boundedInteger把maxPosts限制在1100默认50防止一次拉取过多造成页面卡顿每条推文输出text、author、handle、timestamp四个字段handle取自User-Name内链接的href提取在page.evaluateAll的浏览器上下文中一次完成避免多次跨进程通信。关于置顶推文pinned posttimeline.md 明确指出置顶推文是时间线中第一个[data-testidtweet]只有位于时间线顶部时才需要跳过第一个元素来过滤它——滚动之后置顶推文会离开视口位置判断必须结合滚动状态。搜索用户searchUserssearch-users.js 对应 manifest 中search_users工具。它先用ctx.browser.openOrReuseTab打开https://x.com/search?fuserqqueryfuser限定用户搜索query 经encodeURIComponent编码再等待页面加载最后在浏览器端遍历[data-testidcellInnerDiv]提取用户卡片const users await ctx.page .locator([data-testidcellInnerDiv]) .evaluateAll((results) { return results .map((el) ({ name: el.querySelector([data-testidUser-Name] span)?.innerText?.trim() || , handle: el.querySelector([data-testidUser-Name] a)?.innerText?.trim() || , followers: el.querySelector([data-testidFollow])?.previousElementSibling?.innerText?.trim() || , })) .filter((u) u.name || u.handle); });粉丝数通过Follow 按钮的前一个兄弟元素间接获取这是 X 搜索结果卡片中一个相对稳定的布局约定最后用.filter丢弃空条目。浏览器端聚焦提取post_from_active_elementextract-post.js 是 manifest 中唯一的browserTools浏览器工具与 Node 工具不同它不持有ctx而是以纯浏览器脚本形式注入页面执行async function(args) { const el document.querySelector([data-testidtweet]:focus) || document.querySelector([data-testidtweet]); if (!el) return { error: no active tweet found }; return { text: el.querySelector([data-testidtweetText])?.innerText?.trim() || , author: el.querySelector([data-testidUser-Name] span)?.innerText?.trim() || , timestamp: el.querySelector(time)?.getAttribute(datetime) || , }; }逻辑优先取当前聚焦的推文:focus找不到再回退到第一个推文无推文时返回{ error: no active tweet found }。这与tweet根节点作为点击目标的设计呼应键盘/辅助技术聚焦到推文卡片后即可用该工具摘取当前上下文。站点技能的加载与调用链路知识笔记要变成 Agent 可用的能力依赖 index.ts 中实现的加载机制匹配siteSkillsForUrl(url)解析 URL 主机名遍历learnings/下各站点目录用domainMatches比对 manifest 中的domains含通配符装载知识loadLearnedContext读取命中的notes/*.md内容并为每个工具生成带调用示例的签名如await site.runTool(x-com, get_timeline_posts, { ... })执行 Node 工具runNodeSiteTool按 manifest 声明的pathcallable动态import工具模块并调用工具以(ctx, args)签名接收浏览器上下文注入浏览器工具loadBrowserToolSource读取脚本源码wrapBrowserTool将其包装为(async () { ... })(args)形式注入页面。其中路径校验index.ts强制工具的path必须是站点目录内的相对路径禁止..逃逸保证学习条目的沙箱边界。实战组合 SKILL.md 工作流驱动 X 自动化将上述知识放回 SKILL.md 定义的 heredoc 工作流中即可写出可运行的 X 自动化脚本。以打开时间线、滚动加载、批量提取推文为例ego-browser nodejs的 heredoc 脚本体内可直接使用内置 helperconst task await useOrCreateTaskSpace(scan x timeline) cliLog(task space id: task.id) await openOrReuseTab(https://x.com/home, { wait: true, timeout: 20 }) // 语义工作流先快照观察页面 cliLog(await snapshotText()) // 滚动加载更多推文虚拟列表懒加载 await scrollToBottomUntil( async () await js(String.rawdocument.querySelectorAll([data-testidtweet]).length) 20, { step: 900, wait: 1, maxSteps: 20 } ) // 浏览器端闭包一次性提取规避多次 js() 调用 const posts await js(String.raw(() { return [...document.querySelectorAll([data-testidtweet])].slice(0, 20).map(el ({ text: el.querySelector([data-testidtweetText])?.innerText?.trim() || , author: el.querySelector([data-testidUser-Name] span)?.innerText?.trim() || , ts: el.querySelector(time)?.getAttribute(datetime) || , })) })()) cliLog(JSON.stringify(posts, null, 2))关键要点回顾点击交互一律以[data-testidtweet]为点击目标遵循 Anti-Click-Wrap 约定提取在单个浏览器端闭包内完成避免多次await js()跨进程往返滚动用scrollToBottomUntil/page.mouse.wheel触发懒加载并感知虚拟列表的按需渲染特性提取作者、时间戳分别走User-Name span与time[datetime]若需过滤置顶推文仅在时间线顶部时跳过第一个tweet元素任务结束记得用completeTaskSpace(name, { keep })收尾。需要搜索用户时可复用站点技能中的既有工具思路直接打开https://x.com/search?fuserq关键词然后遍历[data-testidcellInnerDiv]提取User-Name与粉丝数。若希望后续任务自动获得这套 X 站点知识只需保证learnings/下 x-com 条目manifest notes tools位于 Agent 工作区可扫描的根目录即可运行时会在每次访问 x.com 域名时自动装载。结语XTwitter作为高动态 SPA其自动化关键在于稳定锚点的选择与点击目标的取舍。ego-browser 通过 x-com 学习条目 将AppTabBar/primaryColumn/tweet/tweetText等data-testid锚点、Anti-Click-Wrap 规避模式以及三个提取工具固化为可复用资产配合 learning 模块 的域名匹配与工具装载机制Agent 在访问 x.com 时即可自动获得这套站点知识。掌握本文的页面结构与工具实现你就能在自己的 ego-browser heredoc 脚本中稳定地完成 X 时间线扫描、推文提取与用户搜索等自动化任务。【免费下载链接】ego-liteThe fastest browser for AI agents to run browser automation, built for sharing your logged-in browser state with your AI agents, like Codex or Claude Code, without disturbing you. Zero cost, zero config.项目地址: https://gitcode.com/GitHub_Trending/eg/ego-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考