开篇
你是否遇到过这样的场景：辛辛苦苦写好的 Selenium 脚本，网站改个版就全废了？或者尝试用 AI Agent 自动化浏览器，结果每次运行都有不同的结果？
今天要介绍的 Stagehand，或许能解决你的痛点。
源码下载：
stagehand-main.zip
(37.21 MB, 下载次数: 0)
它解决了什么问题？
传统的浏览器自动化工具（Selenium、Playwright）依赖精确的 CSS 选择器和 XPath，页面结构一变就得重写代码。而纯 AI Agent 虽然灵活，但不可预测，生产环境根本不敢用。
Stagehand 的核心思路很简单：让你自己决定什么时候用代码，什么时候用 AI。
四个核心能力
1. Act - 用自然语言操作页面
// 传统方式
await page.click('#submit-button > div.container > button[data-testid="submit"]');
// Stagehand 方式
await page.act("点击提交按钮");
即使按钮的 class 或 id 改了，代码依然能跑。
const products = await page.extract({
instruction: "提取前5个商品的名称和价格",
schema: z.object({
items: z.array(z.object({
name: z.string(),
price: z.number()
}))
})
});
不用写复杂的 DOM 遍历，直接告诉它你要什么数据，还能用 Zod 保证类型安全。
3. Observe - 发现可用操作
const actions = await page.observe("找到所有可以点击的产品卡片");
让 AI 帮你发现页面上有哪些可交互元素，特别适合探索陌生网站。
4. Agent - 自主完成任务
const agent = stagehand.agent({
provider: "anthropic",
model: "claude-sonnet-4-20250514"
});
await agent.execute("去 LinkedIn 搜索旧金山的 AI 工程师，保存前5个档案");
对于复杂的多步骤任务，直接交给 Agent 自主完成。
实战案例：电商价格监控
import { Stagehand } from '@browserbasehq/stagehand';
import { z } from 'zod';
const stagehand = new Stagehand({ env: 'LOCAL' });
await stagehand.init();
const page = stagehand.page;
// 混合使用 Playwright 和 AI
await page.goto("https://www.amazon.com");
await page.act("搜索 'wireless headphones'");
// 提取商品信息
const products = await page.extract({
instruction: "提取前3个商品的详细信息",
schema: z.object({
products: z.array(z.object({
name: z.string(),
price: z.number(),
rating: z.number()
}))
})
});
// 用代码做业务逻辑
const bestDeal = products.products.sort((a, b) =>
(b.rating / b.price) - (a.rating / a.price)
)[0];
console.log("最佳性价比:", bestDeal);
await stagehand.close();
运行结果：
最佳性价比: {
name: "Sony WH-1000XM5",
price: 349.99,
rating: 4.7
}
这个脚本的优势在于：
- 灵活性：页面改版不影响运行
- 可控性：关键逻辑用代码，保证可预测
- 类型安全：TypeScript + Zod 双重保障
技术亮点
1. 完全兼容 Playwright
Stagehand 基于 Playwright 构建，所有 Playwright API 都能直接用：
const page = stagehand.page;
await page.goto("https://example.com"); // 原生 Playwright
await page.act("点击登录"); // Stagehand AI
await page.screenshot({ path: 'result.png' }); // 原生 Playwright
不会被锁定在某个抽象层，随时可以"降级"到原生代码。
2. 支持主流 AI 模型
- OpenAI GPT-4o / Computer Use
- Anthropic Claude Sonnet 4
- 自定义模型接入
3. 缓存机制
对于重复操作，Stagehand 会缓存 AI 的决策，减少 API 调用和成本：
const stagehand = new Stagehand({
enableCaching: true
});
4. 生产级部署
配合 Browserbase 云服务，可以获得：
- 会话录制和回放
- Prompt 可观察性
- 分布式浏览器集群
- CAPTCHA 自动处理
适用场景
✅ 数据抓取：适应页面变化，无需频繁维护
✅ 自动化测试：用自然语言描述测试步骤
✅ 表单填充：智能识别字段，自动填写
✅ 监控任务：定期检查网站变化
✅ 研究 Agent：构建能自主浏览网页的 AI 助手
快速开始
# 创建新项目
npx create-browser-app
# 或手动安装
npm install @browserbasehq/stagehand
npx playwright install
配置环境变量：
OPENAI_API_KEY=your_key
# 或
ANTHROPIC_API_KEY=your_key
就这么简单，5 分钟就能跑起来。
对比其他方案
| 方案 |
灵活性 |
可靠性 |
开发效率 |
| Selenium/Playwright |
❌ |
✅ |
⭐⭐ |
| 纯 AI Agent |
✅ |
❌ |
⭐⭐⭐⭐ |
| Stagehand |
✅ |
✅ |
⭐⭐⭐⭐⭐ |
Stagehand 的核心优势是可控的 AI：你决定在哪里用 AI，在哪里用代码。
社区与生态
- GitHub Stars: 17.4k+（增长迅速）
- 开源协议: MIT
- 语言支持: TypeScript、Python
- 维护团队: Browserbase（专业浏览器基础设施公司）
项目文档完善，社区活跃，Issue 响应及时，适合生产环境使用。
总结
Stagehand 不是要取代 Playwright，而是给它装上了 AI 大脑。它让浏览器自动化变得更智能、更稳定、更易维护。
如果你正在做：
- 需要长期维护的爬虫项目
- 复杂的 E2E 测试
- AI Agent 应用开发
不妨试试 Stagehand，或许能让你的代码少改几次。
觉得有用？关注「云栈大前端」，获取更多前沿技术分享！
📎 项目资源
GitHub 仓库：https://github.com/browserbase/stagehand
官方文档：https://docs.browserbase.com/introduction/stagehand
NPM 包：https://www.npmjs.com/package/@browserbasehq/stagehand
Python 版本：https://github.com/browserbase/stagehand-python
标签：#Stagehand #Github #浏览器自动化 #AI #Playwright #前端工程化 #开源项目
发表于 2025-10-8 23:19:43
|
查看: 11|
回复: 0
