企业官网建设流程全解析

选择器一改就崩？用 Stagehand 一句自然语言驱动浏览器

【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand

维护一份 Playwright 脚本的人都有过这种体验：页面改版换个 class 名，脚本就崩三处。Stagehand 是 Browserbase 开源的浏览器代理 SDK（The SDK For Browser Agents），它让你用自然语言描述"点哪个按钮""抓哪段信息"，由 AI 理解页面结构并自动执行，网站变了它还能自愈。

它解决了什么问题

传统自动化工具的定位逻辑是"人写死选择器"：div.menu > ul > li:nth-child(3) a，页面一重构就得改代码，非技术同事更没法参与维护。Stagehand 的思路相反——把页面交给 LLM 理解，你只说"点击 Evals 按钮"，它自己找元素；网站结构变了，它会检测到并自动刷新执行方式，这就是官方的 self-healing actions。架构上它把驱动逻辑做成浏览器扩展贴在页面旁边跑，走 CDP 低延迟通道，所以比"远程截图 + 模型看图"的方案快得多。

图：Stagehand 演示页面，输入一句自然语言即可驱动浏览器执行任务

🚀 第一次跑起来

你刚装好环境，按 v4 文档的顺序走三步就能跑通。

创建项目

mkdir my-stagehand-app && cd my-stagehand-app pnpm init -y && pnpm add @browserbasehq/stagehand zod

配好密钥

至少需要一个 Browserbase 的浏览器会话 key；不配模型 key 时 Model Gateway 会自动选模型，想用自己的 LLM 再补一个：

export BROWSERBASE_API_KEY=your_api_key

跑通示例

写个最小脚本（index.ts）：

const browser = await browserbase.launch({ apiKey: process.env.BROWSERBASE_API_KEY }); const stagehand = await Stagehand.create({ browser }); const [page] = await browser.context.pages(); await page.goto("https://stagehand.dev"); await stagehand.act("Click the 'Evals' button.");

node index.ts跑完，页面上那个按钮就真的被点掉了。

图：示例脚本在本地终端运行，浏览器被自动化接管并打开文档页面

四个能干活的能力

act：让浏览器替你点

一句指令完成点击、输入、滚动等操作。await stagehand.act("Click the 'Evals' button.")，适合流程固定但页面结构不稳的场景。

observe：先看看页面上能干什么

返回当前页面里所有符合描述的交互元素及其选择器：const { data: actions } = await stagehand.observe("What can I click on this page?")。拿到选择器后你可以切回确定性的 locator 操作，AI 只负责定位。

extract：把页面变成结构化数据

配一个 zod schema，只回你要的字段，不用自己写 DOM 遍历：

const { data: pr } = await stagehand.extract( "extract the title of the PR", z.object({ title: z.string() }));

这也是替代"选择器 + 正则拼数据"最直接的用法。

WebMCP：直接调用页面暴露的工具

有些页面把自己的能力注册成了工具，await page.tools()拿到后直接invoke调用。比如结算流程本来要点六下，现在一次带类型的调用就完成，省掉了中间所有 UI 操作。

图：同一个"提取公司名和批次号"的任务，Stagehand 侧只要一句 extract 指令，Playwright 侧要写整段 DOM 遍历

什么时候用它、什么时候别用

适合：目标页面频繁改版、选择器老是失效的抓取任务；表单填写和多步骤业务流程；需要给 AI Agent 提供浏览器操作能力；同一段自动化要同时在 TypeScript、Python、Go 里跑（三套 SDK 行为一致）。

不太适合：对延迟敏感的 CI 流水线——自然语言动作每次都有模型推理开销；需要像素级精确断言的 UI 回归测试；以及单次调用 token 成本敏感、且页面完全稳定的场景（那种情况传统选择器反而更省）。

📌 往下走

• 快速入门文档：从零到跑通 act / extract / observe
• Stagehand 方法 API 参考：每个方法的完整签名
• TypeScript 示例目录：act、batch、caching、fileUpload 都能直接抄

项目迭代很快，docs 里现在并存 v2、v3、v4 三套文档，API 有差异，看代码前先确认版本。

选择器一改就崩的日子可以过去了：页面交给 Stagehand 的理解能力，你只维护那句自然语言。下一步可以拿你手边那个最容易挂的爬虫脚本试试——把里面最长的那串选择器，换成一句extract("...")，然后观察它下次改版时还挂不挂。

【免费下载链接】stagehandThe SDK For Browser Agents项目地址: https://gitcode.com/GitHub_Trending/stag/stagehand