How to Use OpenClaw with Playwright for Browser Automation

A 2026 benchmark by ytyng.com tested three browser automation approaches on the same 10-step login-and-form task. OpenClaw's Playwright CLI completed it in roughly 27,000 tokens. The MCP-based approach needed approximately 114,000 tokens for identical work, a 4x difference driven by tool-definition overhead alone costing around 13,700 tokens per request.

That gap matters because every token an agent spends on browser mechanics is a token it cannot spend on reasoning. Without Playwright installed, OpenClaw falls back to Chrome DevTools Protocol for basic operations: snapshots, screenshots, and simple clicks using accessibility-tree references. These work, but advanced actions like CSS-selector targeting, PDF export, drag-and-drop, and JavaScript evaluation return a 501 error.

Playwright bridges that gap. It gives OpenClaw a full browser engine with headed or headless rendering, persistent sessions that retain cookies across tasks, and a CLI interface purpose-built for agent consumption. The accessibility tree still handles page comprehension (reducing a typical page to 200 to 400 tokens versus thousands for raw DOM), but Playwright adds the interaction depth that production automation demands.

The practical upshot: an OpenClaw agent with Playwright installed can handle login flows, multi-step form submissions, dynamic content extraction, and visual regression captures. Without it, you are limited to read-only page inspection and coordinate-based clicking.

OpenClaw's browser tool supports two tiers of functionality. The base tier uses Chrome DevTools Protocol for snapshots, screenshots, and simple clicks. The advanced tier requires Playwright and unlocks CSS-selector targeting, form filling, drag-and-drop, JavaScript evaluation, PDF export, and multi-tab management. Without Playwright, advanced actions return a 501 error.

The setup follows four steps, each documented in the official browser tool guide:

1. Install Playwright with bundled browsers. OpenClaw needs the full Playwright package, not the core-only variant, because it relies on bundled Chromium to drive browser sessions. The official docs specify the exact install commands for your environment. Container deployments should bake the browser binary into the image during the build step rather than installing at runtime.

2. Restart the Gateway. OpenClaw detects Playwright at Gateway startup, so a restart is required after installation for the browser tool to recognize the new capabilities.

3. Enable browser support in configuration. The Gateway configuration includes settings for enabling browser access, choosing headed or headless mode, and toggling the sandbox. Use headless mode for CI pipelines and server deployments. Switch to headed mode during development to watch the agent navigate in real time.

4. Verify the installation. OpenClaw provides status commands that confirm Playwright detection and list active browser sessions. If the status reports Playwright as unavailable, the most common fix is confirming you installed the full package (not the core-only variant) and restarted the Gateway.

The playwright-cli skill exposes a command-line interface that agents call directly. Each command maps to a specific browser action, keeping token overhead low compared to tool-definition-heavy MCP approaches.

Navigation

• open [url] launches a page in a new or existing browser session
• close shuts down the current page
• reload refreshes the page
• go-back and go-forward navigate browser history

Element interaction

• click [ref] clicks an element by its accessibility-tree reference
• dblclick [ref] double-clicks for edit-mode triggers
• fill [ref] [value] clears a field and enters new text (use for form inputs)
• type [ref] [text] types character by character (use when keystroke events matter)
• hover [ref] moves the cursor over an element to trigger tooltips or dropdowns
• drag [source] [target] moves an element from one position to another
• check [ref] and uncheck [ref] toggle checkboxes
• select [ref] [value] picks an option from a dropdown

Capture and inspection

• screenshot captures the full page or a specific element as an image
• snapshot returns the page's accessibility tree with numbered element references
• eval [code] executes JavaScript in the page context and returns the result
• console shows browser console messages for debugging
• network displays network request logs

Session management

• session-list shows active browser sessions
• session-stop [id] terminates a specific session
• session-stop-all closes every running session
• session-delete [id] removes session data including cookies and storage

Tab operations

• tabs lists all open tabs
• open [url] in a new tab context for multi-tab workflows
• close targets a specific tab when multiple are open

Configuration

The skill reads environment variables for runtime behavior: PLAYWRIGHT_MCP_BROWSER sets the browser engine (default: chromium), PLAYWRIGHT_MCP_HEADLESS toggles headed mode, and PLAYWRIGHT_MCP_ALLOWED_HOSTS restricts which domains the agent can access. You can also drop a playwright-cli.json config file to set output directories and console log levels.

Store your automation output where your team can find it

Fastio gives OpenClaw agents 50GB of indexed, searchable workspace storage. Upload scraped data, test artifacts, and screenshots, then query everything with natural language. No credit card, no trial expiration.

Start 14-Day Trial

Browser-based scraping with OpenClaw and Playwright handles JavaScript-rendered content that HTTP-only scrapers miss. Here is the general workflow.

1. Open the target page and wait for rendering

The agent calls open [url], which loads the page and waits for the DOM to stabilize. For single-page applications that load data asynchronously, the agent can verify readiness by running snapshot and checking that expected elements appear in the accessibility tree.

2. Extract data using snapshot or eval

The snapshot command returns a lightweight accessibility tree. The agent reads element references and their text content to pull structured data. For more complex extraction, eval runs JavaScript directly:

document.querySelectorAll('.product-card').forEach(card => {
  console.log(JSON.stringify({
    name: card.querySelector('h2').textContent,
    price: card.querySelector('.price').textContent
  }));
});

The agent captures console output from eval to collect the results.

3. Handle pagination

The agent clicks "Next" buttons or scrolls to trigger infinite-load pages. Each page load gets a fresh snapshot to extract new content. The agent tracks what it has already collected to avoid duplicates.

4. Store results persistently

Raw scraping output is only useful if it survives the session. Local file storage works for one-off jobs, but production scraping pipelines need persistent, shareable storage.

Fastio workspaces give OpenClaw agents a place to write extracted data that persists across sessions and is accessible to other agents or human reviewers. The agent uploads JSON, CSV, or structured files to a workspace via the Fastio MCP server, where Intelligence Mode auto-indexes everything for semantic search. A team member can then query the scraped dataset using natural-language questions without downloading files or writing SQL.

S3 or Google Drive work too, but they require separate indexing infrastructure for search. Fastio bundles storage, indexing, and search in one workspace, with a free tier that covers 50GB and included credits monthly.

OpenClaw's Playwright integration is not limited to data extraction. The same command set handles end-to-end testing, form validation, and visual regression checks in CI pipelines.

End-to-end test flows

An agent can run through a complete user journey: open a login page, fill credentials, submit the form, verify the dashboard loads, navigate to a settings page, and confirm that saved preferences appear correctly. Each step uses fill, click, and snapshot to interact and verify. When a step fails, the agent captures a screenshot and console logs to document what went wrong.

Form filling and validation

The fill command handles text inputs, while select targets dropdowns and check/uncheck works for toggles. For forms that validate on blur or keystroke, use type instead of fill so the page receives individual key events. After submission, snapshot confirms the success message or error state appeared.

Visual regression with screenshots

Capture baseline screenshots of key pages, then re-run the same flow after a deployment and compare outputs. The screenshot command supports full-page captures and element-level targeting. Agents can save screenshots to a Fastio workspace where team members review visual diffs directly. The audit trail tracks when each screenshot was captured and by which agent session.

PDF generation for reports

The Playwright integration supports PDF export from rendered pages. This is useful for generating compliance reports, receipts, or formatted documentation from web applications. The agent navigates to the report page and captures a PDF artifact without needing a separate rendering service.

CI pipeline integration

Since Playwright runs in headless mode, these test flows fit directly into GitHub Actions, GitLab CI, or any container-based pipeline. The agent runs the test suite, captures artifacts on failure, and uploads results to a shared workspace for review. Configure PLAYWRIGHT_MCP_HEADLESS=true and PLAYWRIGHT_MCP_ALLOWED_HOSTS to lock down which domains the pipeline can access.

Browser automation in production hits real-world friction. Here are the common issues and their fixes.

501 errors on advanced actions

This means Playwright is not detected. Confirm you installed the full Playwright package (not the core-only variant), downloaded the Chromium binary, and restarted the Gateway. Use the status command from the browser tool docs to verify detection.

Stale sessions and orphaned tabs

Long-running agents accumulate browser sessions. Use session-list to audit active sessions and session-stop-all to clean up. For automated cleanup, schedule periodic session-delete calls to remove session data including cookies and local storage.

High token usage on complex pages

Some pages generate massive accessibility trees. Two strategies help: use eval to extract only the data you need instead of parsing the full snapshot, or scope screenshot to specific elements rather than full-page captures. Element-level screenshots consume fewer tokens when the agent needs to reason about the image.

Timeout failures on slow pages

Configure appropriate timeouts for pages that load slowly. Single-page applications with heavy API calls may need 30 seconds or more before content appears. The agent can poll with snapshot to check for expected elements rather than relying on a fixed wait.

Concurrent agent conflicts

When multiple agents share a browser environment, sessions can interfere with each other. Use separate browser profiles for each agent. OpenClaw's managed profile mode isolates cookie jars and storage between concurrent operations.

SSRF protection for untrusted URLs

If your agent processes URLs from external sources, enable SSRF protection in the browser configuration. This blocks requests to private network ranges and restricts navigation to an allowlist of approved domains. The browser.evaluateEnabled setting should be set to false when running untrusted workflows to prevent arbitrary JavaScript execution.