Stagehand vs Playwright AI vs Browser Use: AI Web Automation in 2026
Stagehand vs Playwright AI vs Browser Use: AI Web Automation in 2026
TL;DR
Stagehand (by Browserbase) is the best developer experience for AI web automation — a clean TypeScript API built on Playwright that lets you describe what to do in plain English. browser-use is the Python-first agentic browser control library powering many open-source AI agents. Playwright with @playwright/test + LLM assistance is the structured approach — use Playwright's reliable locators, add LLM-powered code generation for stubborn selectors, but keep the execution deterministic. In 2026, use Stagehand for prototyping and internal tooling; use structured Playwright + AI for production automation that must be reliable.
Key Takeaways
- Stagehand GitHub stars: ~8k (Feb 2026) — explosive growth since its open-source release in late 2024
- browser-use GitHub stars: ~35k — the dominant Python-first AI browser library; JS port in progress
- AI web automation costs real money — each
act()call in Stagehand consumes ~1–3k tokens, costing $0.003–$0.01 per action - Reliability gap is real — AI-powered automation is 85–95% reliable vs 99%+ for Playwright selectors
- Stagehand supports computer use models (Anthropic Claude Sonnet, GPT-4o) for screenshot-based interaction
- All three support CDP (Chrome DevTools Protocol) — they all control Chromium/Chrome under the hood
- The sweet spot: use AI to generate locators, Playwright to execute — best of both worlds
Why AI Web Automation?
Traditional web automation (Playwright, Puppeteer, Selenium) requires precise CSS selectors or ARIA labels. Maintenance is expensive: every UI change breaks tests. AI-powered automation changes the equation — you describe what to do rather than how to find elements.
The tradeoff: AI automation is slower, more expensive, and less reliable than deterministic automation. It excels at:
- One-off tasks where writing precise selectors isn't worth it
- Rapidly changing UIs where maintaining selectors is a maintenance burden
- Natural language scripts for non-engineers to describe automation tasks
- AI agents that need to navigate arbitrary websites
Stagehand: The TypeScript-First AI Browser
Stagehand wraps Playwright with AI superpowers. It adds three key methods: act() for performing actions, extract() for extracting structured data, and observe() for understanding the current page state.
Installation
npm install @browserbasehq/stagehand
# Requires: API keys for OpenAI or Anthropic
Basic Usage
import { Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";
const stagehand = new Stagehand({
env: "LOCAL", // or "BROWSERBASE" for cloud
modelName: "gpt-4o", // or "claude-3-5-sonnet-20241022"
modelClientOptions: {
apiKey: process.env.OPENAI_API_KEY,
},
verbose: 1,
enableCaching: true, // Cache LLM calls for repeated actions
});
await stagehand.init();
const { page } = stagehand;
// Navigate
await page.goto("https://github.com");
// act() — describe what to do in plain English
await stagehand.act({ action: "Click the Sign in button" });
await stagehand.act({ action: "Fill the username field with 'your-username'" });
await stagehand.act({ action: "Fill the password field with 'your-password'" });
await stagehand.act({ action: "Click the 'Sign in' button to submit the form" });
// extract() — get structured data from the page
const repos = await stagehand.extract({
instruction: "Extract the list of pinned repositories",
schema: z.object({
repositories: z.array(
z.object({
name: z.string(),
description: z.string().nullable(),
language: z.string().nullable(),
stars: z.number(),
})
),
}),
});
console.log(repos.repositories);
// [{ name: "my-repo", description: "...", language: "TypeScript", stars: 42 }]
await stagehand.close();
Computer Use Mode (Screenshot-Based)
const stagehand = new Stagehand({
env: "LOCAL",
modelName: "claude-3-5-sonnet-20241022", // Anthropic's computer use model
modelClientOptions: { apiKey: process.env.ANTHROPIC_API_KEY },
// Enable computer use for screenshot-based interaction (bypasses DOM)
enableComputerUse: true,
});
await stagehand.init();
await page.goto("https://complex-spa.example.com");
// Works even on canvas-heavy apps, complex custom UIs
await stagehand.act({
action: "Click the blue 'Create Project' button in the top navigation",
});
Multi-Step Agent Flow
import { Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";
async function scrapeLinkedInProfile(url: string) {
const stagehand = new Stagehand({
env: "BROWSERBASE", // Cloud browser — stealth, no detection
browserbaseApiKey: process.env.BROWSERBASE_API_KEY,
browserbaseProjectId: process.env.BROWSERBASE_PROJECT_ID,
modelName: "gpt-4o-mini", // Cheaper model for simple tasks
modelClientOptions: { apiKey: process.env.OPENAI_API_KEY },
});
await stagehand.init();
const { page } = stagehand;
await page.goto(url);
// Wait for page to load
await stagehand.observe();
const profile = await stagehand.extract({
instruction: "Extract the person's profile information",
schema: z.object({
name: z.string(),
headline: z.string(),
location: z.string().optional(),
connections: z.string().optional(),
about: z.string().optional(),
experience: z.array(
z.object({
title: z.string(),
company: z.string(),
duration: z.string().optional(),
})
),
}),
});
await stagehand.close();
return profile;
}
Stagehand with Browserbase (Cloud)
// Browserbase provides managed browsers with:
// - Stealth mode (harder to detect as bot)
// - Rotating residential proxies
// - Session recording and replay
// - CAPTCHA solving
const stagehand = new Stagehand({
env: "BROWSERBASE",
browserbaseApiKey: process.env.BROWSERBASE_API_KEY!,
browserbaseProjectId: process.env.BROWSERBASE_PROJECT_ID!,
modelName: "claude-3-5-sonnet-20241022",
modelClientOptions: { apiKey: process.env.ANTHROPIC_API_KEY! },
browserbaseSessionCreateParams: {
projectId: process.env.BROWSERBASE_PROJECT_ID!,
browserSettings: {
viewport: { width: 1920, height: 1080 },
},
},
});
Playwright with AI-Assisted Automation
Traditional Playwright + AI is about using LLMs to generate selectors and test code, not to execute actions. This keeps execution deterministic while reducing the cost of writing automation.
AI-Powered Locator Generation
import { test, expect } from "@playwright/test";
import Anthropic from "@anthropic-ai/sdk";
import * as fs from "fs";
// Utility: Use AI to find the right selector
async function findSelector(
page: any,
description: string
): Promise<string> {
// Take a screenshot + get accessibility tree
const screenshot = await page.screenshot({ type: "png" });
const ariaSnapshot = await page.accessibility.snapshot();
const claude = new Anthropic();
const response = await claude.messages.create({
model: "claude-3-5-sonnet-20241022",
max_tokens: 500,
messages: [
{
role: "user",
content: [
{
type: "image",
source: {
type: "base64",
media_type: "image/png",
data: screenshot.toString("base64"),
},
},
{
type: "text",
text: `Given this page, provide the best Playwright locator for: "${description}"
ARIA tree: ${JSON.stringify(ariaSnapshot, null, 2)}
Respond with only the locator string, e.g.: page.getByRole('button', { name: 'Submit' })`,
},
],
},
],
});
return response.content[0].text.trim();
}
// Use in tests
test("submit form", async ({ page }) => {
await page.goto("https://app.example.com/checkout");
// AI-generated stable locators
const submitButton = await findSelector(page, "the checkout submit button");
// Returns: page.getByRole('button', { name: 'Complete Order' })
// Execute with Playwright — deterministic, no AI at runtime
await page.getByRole("button", { name: "Complete Order" }).click();
await expect(page.getByText("Order confirmed")).toBeVisible();
});
@playwright/test with ai Fixture (Community Pattern)
// playwright.ai.fixture.ts — community pattern for AI-assisted tests
import { test as base } from "@playwright/test";
import OpenAI from "openai";
type AIFixture = {
ai: {
act: (instruction: string) => Promise<void>;
assert: (condition: string) => Promise<void>;
};
};
const test = base.extend<AIFixture>({
ai: async ({ page }, use) => {
const openai = new OpenAI();
const act = async (instruction: string) => {
const screenshot = await page.screenshot({ encoding: "base64" });
const html = await page.content();
const response = await openai.chat.completions.create({
model: "gpt-4o",
messages: [
{
role: "user",
content: [
{ type: "image_url", image_url: { url: `data:image/png;base64,${screenshot}` } },
{
type: "text",
text: `Given the screenshot, provide Playwright code to: ${instruction}
HTML context: ${html.slice(0, 3000)}
Respond with valid JavaScript only.`,
},
],
},
],
});
// Execute the generated code
const code = response.choices[0].message.content!;
await page.evaluate(new Function("page", code)(page));
};
await use({ act, assert: async () => {} });
},
});
// Usage
test("user can checkout", async ({ page, ai }) => {
await page.goto("/checkout");
await ai.act("Fill in the shipping address form with test data");
await ai.act("Select the standard shipping option");
await ai.act("Click the place order button");
await expect(page.getByText("Order confirmed")).toBeVisible();
});
browser-use: Python-First, JS Coming
browser-use is the dominant open-source AI browser control library, primarily Python. The JavaScript/TypeScript version (browser-use-js) is in early development but gaining traction.
Python Usage (Reference — most popular form)
# Python example (reference)
from browser_use import Agent
from langchain_openai import ChatOpenAI
agent = Agent(
task="Find the top 3 TypeScript repositories on GitHub this week",
llm=ChatOpenAI(model="gpt-4o"),
)
result = await agent.run()
print(result)
JavaScript Port (browser-use-js — experimental)
// browser-use-js — early stage, API may change
import { Agent } from "browser-use-js";
import { ChatOpenAI } from "@langchain/openai";
const agent = new Agent({
task: "Go to GitHub and find the trending TypeScript repositories this week",
llm: new ChatOpenAI({ modelName: "gpt-4o" }),
browserConfig: {
headless: false, // Visual mode for debugging
chromePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
},
});
const result = await agent.run();
console.log(result.finalResult());
console.log("Actions taken:", result.actionHistory());
Feature Comparison
| Feature | Stagehand | Playwright + AI | browser-use (JS) |
|---|---|---|---|
| Language | TypeScript | TypeScript | TypeScript (port) |
| Maturity | ✅ Stable | ✅ Stable | ⚠️ Experimental |
| AI integration | Native (act/extract) | Manual (code generation) | Native (agentic) |
| Execution mode | AI-powered | Deterministic | AI-powered |
| Reliability | ~85-95% | ~99%+ | ~80-90% |
| Cost per action | $0.003–$0.01 | $0 (code gen only) | $0.003–$0.015 |
| Playwright under hood | ✅ | ✅ | Via Playwright |
| Cloud browser support | ✅ Browserbase | ✅ (BrowserStack, etc.) | ✅ |
| Computer use (screenshot AI) | ✅ | ❌ | ✅ |
| Structured data extraction | ✅ (Zod schema) | Manual | ✅ |
| CAPTCHA handling | Via Browserbase | Manual | Manual |
| GitHub stars | 8k | 70k (Playwright) | 35k (Python) |
| npm downloads/week | ~50k | 5M+ (Playwright) | N/A (Python) |
Cost Analysis
Running AI web automation at scale requires careful cost management:
Simple action (click, fill form): ~1,000 tokens × $0.000003 = $0.003/action
Complex action (extract data, navigate): ~3,000 tokens × $0.000003 = $0.009/action
Computer use (screenshot): ~2,000 tokens × $0.000003 + vision = $0.01–$0.03/action
100 automations/day × $0.005 avg = $0.50/day = $15/month
1,000 automations/day = $150/month
10,000 automations/day = $1,500/month
Vs. Playwright (deterministic): $0/month for compute (just browser costs)
For high-volume automation, the cost difference between AI-powered and traditional Playwright is significant. Use AI automation where it provides value (unstable UIs, one-off tasks); use deterministic Playwright everywhere else.
When to Use Each
Choose Stagehand if:
- You're building internal tools where an engineer needs to automate repetitive browser tasks
- You need to automate unstable UIs (SPAs that change frequently, or custom Canvas-based apps)
- You want structured data extraction with type safety (Zod schemas in
extract()) - You're deploying AI agents that need to navigate arbitrary websites
Choose Playwright + AI (selector generation) if:
- You need production-grade reliability (99%+ success rate)
- Cost is a constraint — AI is only used to generate code, not at runtime
- You're building a test suite that runs hundreds of times per day
- Your team already has Playwright expertise
Choose browser-use if:
- You're working in Python primarily and need agentic browser control
- You're building an AI agent that needs to research the web as part of a larger pipeline
- The JS port is mature enough for your use case (verify current status before using)
Methodology
Data sourced from GitHub repositories (star counts as of February 2026), npm weekly download statistics (January 2026), official documentation, and community discussions on Discord and Twitter/X. Cost estimates based on GPT-4o pricing ($3/1M input, $15/1M output) as of Q1 2026. Reliability metrics from community benchmarks and Stagehand's published evaluation data. browser-use JS port status verified from official GitHub repository.
Related: Playwright vs Cypress vs Puppeteer for traditional E2E testing, or MSW vs Nock vs Axios Mock Adapter for API mocking in tests.