# Example 04: Browser Automation

**Capability:** Claude Code can control a real browser via Playwright MCP, take
screenshots, and extract structured data from live pages.

**OpenClaw equivalent:** CDP/Playwright browser automation with screenshot and act commands.

---

## Prerequisites

Playwright MCP must be enabled. Add this to `.mcp.json`:

```json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}
```

This repo's `.mcp.json` already includes it. If Claude Code does not show
Playwright tools at startup, run `npm install` to ensure the package is
available, then restart.

---

## The Prompt

```
Navigate to https://news.ycombinator.com, take a screenshot of the current
front page, and list the top 5 stories with their point counts and submitter
names.

Save the list to hacker-news-top5.md with the format:
1. [title] - [points] points by [submitter]

Include a note at the bottom with the timestamp of when you fetched this.
```

---

## What Happens

Claude Code will:

1. Use the Playwright MCP `browser_navigate` tool to load the page
2. Use `browser_screenshot` to capture the current state
3. Use `browser_snapshot` or `browser_get_text` to extract story data
4. Use Write to save the structured list to `hacker-news-top5.md`

---

## Why This Matters

Browser automation handles pages that cannot be reached with WebFetch alone:
JavaScript-rendered content, login-protected pages, and interactive workflows.

OpenClaw bundles Playwright natively. Claude Code uses the same underlying
engine via MCP. The setup takes two minutes; the capability is identical.