Browser Automation for AI Agents: Agent Browser vs Playwright Skills

Two of the most popular skills in the ClawHub marketplace both do browser automation. They're not interchangeable. Using the wrong one for your use case will waste your time and frustrate your users.

This tutorial breaks down agent-browser and playwright-automation — how each works, what each does well, where each falls short, and the decision framework for choosing between them.

The Core Difference

Agent Browser is a high-level skill designed for exploratory, conversational browser control. You describe what you want in natural language and the agent figures out the steps.

Playwright Automation is a structured skill that generates and runs deterministic Playwright scripts. You get precise control, repeatability, and testable output.

One is flexible and forgiving. The other is exact and reliable. Your use case determines which you need.

Agent Browser: The Skill

Installation

clawhub install agent-browser

How It Works

Agent Browser exposes a single slash command:

/agent-browser <natural language instruction>

Under the hood, it:

1. Interprets your instruction
2. Controls a Chrome instance via an MCP extension or Playwright in exploratory mode
3. Adapts in real time if the page differs from expectations
4. Returns results as structured data or screenshots

What Agent Browser Does Well

Exploratory tasks where the page structure is unknown:

/agent-browser go to github.com/trending and tell me the top 5 repos trending today with their star counts

The agent navigates, reads the DOM, extracts the data, and returns a clean summary — even if GitHub's markup changes.

One-off research and data gathering:

/agent-browser search for "claude code skills" on Google and summarize the top 5 results

Testing UI flows conversationally:

/agent-browser sign into the staging app at localhost:3000 using test@example.com / password123, navigate to the dashboard, and tell me if the sales chart loads correctly

When you don't want to write code:

If you need to grab something from a website once, Agent Browser is the fastest path. You don't write a script, you don't handle selectors, you just describe the goal.

Agent Browser Limitations

• Non-deterministic — The same instruction can produce different execution paths on different runs
• Slower — Each step involves an LLM interpretation cycle
• Blocked on some sites — Financial and payment sites often block automated browser tools
• No test artifacts — There's no replayable script output

When to Use Agent Browser

• Quick research tasks
• One-time data extraction
• Manual-replacement tasks where writing code is overkill
• Conversational UI testing during development
• When the target site's structure changes frequently

Playwright Automation: The Skill

Installation

clawhub install playwright-automation

How It Works

Playwright Automation takes a goal and generates a complete, runnable Playwright script. It then executes that script and returns results.

/playwright <task description>

The agent:

1. Analyzes your task
2. Generates TypeScript Playwright code
3. Executes it against a fresh browser instance
4. Returns results + the generated script

What Playwright Automation Does Well

Automated testing that needs to run in CI:

/playwright write and run an e2e test that signs in as a user, adds an item to the cart, and completes checkout on localhost:3000

Output includes both the test results and a playwright.spec.ts file you can commit to your repo.

Deterministic, repeatable scraping:

/playwright scrape the pricing table from example.com/pricing and return it as JSON

The generated script is replayable. Run it tomorrow, next week — same result, same structure.

Form automation:

/playwright fill out the contact form at example.com/contact with name="Test User", email="test@example.com", message="Hello" and submit it

Screenshot and visual regression:

/playwright take a full-page screenshot of localhost:3000 at mobile (375px) and desktop (1440px) widths

Performance measurement:

/playwright measure the page load time and Core Web Vitals for localhost:3000/dashboard

Generated Script Example

When you run /playwright navigate to example.com and extract all h2 headings, you get results plus this:

import { test, expect } from '@playwright/test';

test('extract h2 headings from example.com', async ({ page }) => {
  await page.goto('https://example.com');

  const headings = await page.locator('h2').allTextContents();

  console.log('H2 headings found:', headings);
  expect(headings.length).toBeGreaterThan(0);
});

This script is saved to .claude/playwright-scripts/ and can be run independently:

npx playwright test .claude/playwright-scripts/latest.spec.ts

Playwright Automation Limitations

• Requires a clear, structured task — Vague instructions produce brittle scripts
• Less adaptive — If the page changes significantly, the script may fail
• Heavier setup — Needs Playwright installed in your project

Install Playwright if you haven't:

npm install -D @playwright/test
npx playwright install chromium

When to Use Playwright Automation

• E2E tests you'll run in CI
• Repeatable scraping jobs
• Performance measurement
• Visual regression testing
• Form submissions that need to be auditable
• Any automation that needs to run without human supervision

Side-by-Side Comparison

Decision Framework

Use this tree to pick the right skill:

Does the task need to run again without you watching?
├── Yes → Playwright Automation
└── No
    ├── Do you need the output as a committed test file?
    │   ├── Yes → Playwright Automation
    │   └── No
    │       ├── Is the page structure unpredictable or frequently changing?
    │       │   ├── Yes → Agent Browser
    │       │   └── No
    │       │       └── Either works — use Playwright for repeatability
    │       └── Is this a one-off research task?
    │           ├── Yes → Agent Browser
    │           └── No → Playwright Automation

Using Both Skills Together

For complex projects, use them in tandem:

Discovery phase: Use Agent Browser to explore a new site's structure.

/agent-browser explore the admin panel at localhost:3000/admin and describe all the main sections and navigation patterns

Implementation phase: Use Playwright to build deterministic tests based on what you learned.

/playwright write e2e tests for the admin panel covering: login, dashboard load, user management table

This pattern combines the flexibility of natural language exploration with the reliability of scripted automation.

Troubleshooting

Agent Browser "blocked by safety restrictions" — This happens on financial or payment sites. Switch to Playwright, which launches a fresh browser instance without restrictions.

Playwright scripts failing after site update — Regenerate the script: /playwright [original task]. The agent will produce an updated version against the current DOM.

Agent Browser not finding elements — Provide more context: /agent-browser on localhost:3000, find the button labeled "Create Project" (it's in the top-right of the dashboard) and click it.

Playwright installation errors — Run npx playwright install --with-deps chromium to install the browser with all system dependencies.

Next Steps

• Install Agent Browser or Playwright Automation from the marketplace
• Read the ClawHub CLI guide for faster skill management
• Explore proactive agent patterns to trigger browser automation automatically