企业官网建设流程全解析

Stagehand 浏览器自动化实战指南：用自然语言驱动浏览器，少写一半定位代码

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

Stagehand 是一套面向浏览器 Agent 的 SDK（The SDK For Browser Agents），用自然语言即可完成页面操作、结构化数据提取、元素侦察和多步任务委派。这篇入门笔记讲清楚三件事：新手如何用最短路径跑起来、四类核心能力分别对应哪些真实任务、以及和传统脚本工具相比该在什么场景选它。

一、手写选择器为什么让人头疼

用 Playwright、Puppeteer 这类传统工具写自动化，每个按钮和输入框都得先自己定位：写 CSS 选择器、处理动态 class、页面一改版脚本就整段失效，维护成本全花在"找元素"上。

Stagehand 把"定位元素"这件事交给 AI 理解：你只描述要做什么，由模型在页面上找到对应目标并执行。它省掉的是写选择器和反复修选择器这两个最耗时的环节，换来的是脚本对页面结构变化更强的容忍度。

二、最小启动路径：创建、配置、验证

第一步，创建项目。最快方式是在终端执行npx create-browser-app生成一个示例工程；如果已有 Node.js 项目，直接安装依赖即可：pnpm add @browserbasehq/stagehand zod。

第二步，配置。只需要准备一个 Browserbase API 密钥，写进环境变量并在代码中传入浏览器启动工厂；没有单独配置模型时，系统会自动挑选合适的推理模型，不需要再申请模型厂商的 key。想本地调试就装好 Chrome 切到本地浏览器，想免运维就连云端浏览器会话。

第三步，验证。打开一个目标页面，发一句"提取本页的价值主张"之类的指令，能拿到符合预期的结构化结果，说明整条链路已经通了。

三、能力地图：四个任务场景各管一摊

图中演示了直接向浏览器 Agent 下达自然语言指令、由其自行完成查询流程的过程

• 结构化数据提取（extract）：用一句话加一份字段描述，把页面上的信息直接变成带类型的结构化数据，比如"提取所有公司名和批次号"。
• 单步操作执行（act）：点击、输入、勾选等每步一句话，可以串联成完整流程；不写定位代码，页面小改动不容易让脚本挂掉。
• 页面侦察（observe）：让 AI 列出当前页面上可点击的元素及对应动作，适合先探索再动手，也方便生成可复放的操作候选。
• 整任务委派（agent）：交给它一段多步指令，自己规划、自己执行，适合"帮我比较三家供应商报价"这类无法一步写完的任务。

左侧为 Stagehand 的自然语言调用，右侧是完成同样数据提取任务的 Playwright 手写脚本

四、与传统脚本工具怎么选

从上面的对比图可以看出，同一件"抓取列表数据"的事，传统脚本要手写几十行遍历与匹配逻辑，Stagehand 侧基本只剩一句意图描述。它的强项是探索性强、结构不稳定的场景：新站点试水、表单自动填写、网站回归监控、信息提取，以及 Agent 化的多步业务流程。

但它不是免费的：每次 act、extract 都经过模型推理，单步延迟和调用成本高于纯脚本。如果目标页面结构长期稳定、执行频率很高、或性能预算卡得很死，直接用传统工具，或者用官方推荐的缓存策略把已验证的操作固定下来回放，会更划算。

五、进阶路线

跑通最小路径后，建议按下面的顺序往下走：

• 官方快速入门与安装配置：packages/docs/v4/first-steps/
• 各语言可运行示例（TypeScript、Python、Go）：packages/sdk-ts/examples/、packages/sdk-python/examples/、packages/sdk-go/examples/
• 与 Claude Code、Codex、CrewAI 等 Agent 框架的接入说明：packages/docs/v4/integrations/overview.mdx
• 性能与成本控制（缓存、提速）：packages/docs/v4/best-practices/

常见用例清单：网页数据抓取与分析、自动化表单填写、网站测试与监控、多步骤业务流程自动化。

选一个你天天打开的网站，用一句自然语言跑通 extract，再叠加 act 完成一次点击。哪一步卡住，就回到快速入门文档核对参数配置。

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