How to Automate Browser Tasks with Stagehand and Playwright
Stagehand is an AI browser automation framework from Browserbase that wraps Playwright with three primitives: act, extract and observe. Instead of writing a CSS selector for every click, you describe the action in plain English and let a model drive the page. Your existing Playwright skills still apply — it is a layer on top, not a replacement.
It runs locally with your own browser or against Browserbase’s cloud browsers. For stubborn sites and fast-changing UIs, Stagehand cuts the time spent patching selectors after every redesign.
What is Stagehand?
Stagehand is an open-source TypeScript library that combines browser automation with LLM reasoning. You keep Playwright’s control flow and page object, but use natural-language actions for the parts that would otherwise need brittle selectors. It supports OpenAI, Anthropic and other models for the reasoning step.
How do you install and set it up?
npm install @browserbasehq/stagehand- Set an API key for your chosen model (e.g.
OPENAI_API_KEY). - Optionally set Browserbase credentials for cloud browsers, or run locally.
- Create a Stagehand instance pointed at a page.
- Call
act()with a plain instruction and await it.
First runs make a model call per action, which adds a second or two.
How do act, extract and observe differ?
- act performs an action: “type the email into the signup field and submit”.
- extract pulls structured data from the page using a schema.
- observe returns the available actions on a page so you can plan.
Use extract for scraping, act for tapping through a flow, and observe when you want to see what the page offers before deciding.
How do you extract structured data?
Define a schema (a Zod object or JSON schema) and pass it to extract(). Stagehand returns an object matching the schema, so you get typed fields instead of raw HTML to parse. This is the cleanest way to turn a listing page into rows of data.
How do you keep it fast and cheap?
Every act/extract call costs tokens. Two habits help: cache actions so a repeated step does not re-query the model, and fall back to plain Playwright for stable steps you do not need AI for. A hybrid script — AI for the fragile parts, selectors for the rest — is both cheaper and more reliable than a fully AI-driven one.
What are the limitations?
AI actions can misfire on ambiguous instructions or heavily scripted sites, and they add latency. Complex multi-step flows may need explicit waits and error handling. It is not a magic scraper for anti-bot walls; you still need compliant, rate-limited access.
Key Takeaways
- Stagehand adds AI act/extract/observe to Playwright.
- Install with npm and set a model API key.
- extract returns schema-typed data; act runs natural-language steps.
- Cache actions and keep AI only for fragile steps to cut cost.
- It complements Playwright rather than replacing it.
Last updated October 2026. More at Stagehand.
