How to Use OpenClaw for Browser Automation

What You'll Build

A browser automation setup that lets OpenClaw:

1. Navigate websites — open pages, click buttons, fill forms, scroll through content
2. Extract data — scrape structured data from web pages, tables, and dashboards
3. Take screenshots — capture full-page or element-specific screenshots for reporting
4. Run multi-step workflows — chain browser actions into complex automation sequences

By the end of this guide, you'll be able to automate any browser task by describing what you want in natural language.

Why Use AI for Browser Automation

Traditional browser automation tools (Selenium, Puppeteer, Playwright) are powerful but require writing and maintaining code for every workflow. When the website changes its layout, your scripts break. When you need a new workflow, you write a new script.

AI-powered browser automation changes this:

• Natural language instructions — describe what you want instead of writing selectors and click handlers
• Self-healing — AI adapts to UI changes without script updates
• No code maintenance — workflows are defined by intent, not implementation
• Rapid prototyping — set up a new automation in minutes, not hours
• Visual understanding — AI can interpret page layout, read text from screenshots, and make decisions based on what it sees

Prerequisites

• OpenClaw installed and configured (Getting Started Guide)
• Chrome or Chromium installed on your system
• Node.js 18+

Step 1: Install the Required Skills

# 1. Browser control
npx clawhub@latest install browser-use

# 2. Web data extraction
npx clawhub@latest install web-scraper

# 3. Screenshot capture
npx clawhub@latest install screenshot

Step 2: Verify Browser Setup

The browser-use skill needs a Chrome/Chromium installation:

clawhub inspect browser-use

This checks for a compatible browser and displays the detected path. If Chrome is not found automatically, set the path manually in the skill configuration.

Step 3: Browser Automation in Action

Example 1: Extract Data from a Dashboard

Suppose you need to pull metrics from a web dashboard every morning:

Open https://analytics.example.com, log in with my saved credentials,
navigate to the Daily Metrics page, and extract the table showing
yesterday's KPIs into a Markdown table.

The browser skill handles login, navigation, and data extraction. The result is a clean Markdown table you can paste into reports or Slack.

Example 2: Monitor a Competitor's Pricing Page

Go to competitor.com/pricing, take a screenshot of the pricing table,
and extract all plan names, prices, and feature lists into JSON format.

Output:

{
  "plans": [
    {
      "name": "Starter",
      "price": "$29/month",
      "features": ["5 users", "10GB storage", "Email support"]
    },
    {
      "name": "Professional",
      "price": "$79/month",
      "features": ["25 users", "100GB storage", "Priority support", "API access"]
    },
    {
      "name": "Enterprise",
      "price": "Custom",
      "features": ["Unlimited users", "Unlimited storage", "24/7 support", "SSO", "Audit logs"]
    }
  ]
}

Example 3: Fill Out a Form

Open the internal expense report form at expenses.company.com,
fill in: date = today, category = "Software", amount = $49.99,
description = "ClawHub Pro subscription", then submit.

Example 4: Multi-Step Research Workflow

1. Search Google for "best CI/CD tools 2026 comparison"
2. Open the top 3 results
3. Extract the main comparison points from each article
4. Compile into a summary table

Step 4: Screenshots for Reporting

The screenshot skill captures visual evidence for reporting and monitoring:

# Full page screenshot
clawhub run screenshot --url "https://status.example.com" --full-page

# Specific element
clawhub run screenshot --url "https://grafana.example.com/d/api-latency" --selector ".panel-container"

# Multiple pages
clawhub run screenshot --urls "url1,url2,url3" --output "./screenshots/"

Scheduled Visual Monitoring

Combine with cron to capture daily snapshots:

clawhub run cron --schedule "0 9 * * *" --task "screenshot --url https://status.example.com --output ~/snapshots/{{date}}.png"

Advanced: Complex Workflows

Chaining Browser Actions

For multi-step workflows that need to run reliably:

# .openclaw/browser-workflow.yml
workflow:
  name: "Daily Metrics Collection"
  steps:
    - action: navigate
      url: "https://analytics.example.com"
    - action: login
      credentials: "analytics_dashboard"
    - action: click
      target: "Daily Report tab"
    - action: wait
      condition: "table is fully loaded"
    - action: extract
      target: "metrics table"
      format: "csv"
    - action: screenshot
      target: "full page"
    - action: save
      output: "~/reports/{{date}}-metrics.csv"

Handling Authentication

For sites that require login:

credentials:
  analytics_dashboard:
    url: "https://analytics.example.com/login"
    username_field: "#email"
    password_field: "#password"
    # Credentials stored in OpenClaw's secure credential store

Use clawhub credentials set analytics_dashboard to securely store login details.

Working with SPAs and Dynamic Content

Modern single-page applications load content dynamically. The browser skill handles this automatically by:

• Waiting for network requests to complete
• Detecting when the page is fully rendered
• Retrying if content hasn't loaded yet

For particularly slow pages, you can set explicit wait conditions:

Navigate to the dashboard and wait until the chart labeled "Revenue" is visible before taking a screenshot.

Troubleshooting

Browser fails to launch

• Verify Chrome/Chromium is installed: which google-chrome or which chromium
• Check the path in skill config: clawhub inspect browser-use
• On headless servers, ensure --no-sandbox flag is enabled in the configuration

Page content not loading

• Some pages require JavaScript — the browser skill runs a full browser, so this should work by default
• Check for cookie consent banners blocking content
• Verify the URL is accessible from your machine (VPN, firewall)

Screenshots are blank or incomplete

• Add a wait time before capture: the page may still be rendering
• Use --full-page flag for pages that require scrolling
• Check if the page requires authentication

Extraction returns wrong data

• Be more specific about which element to extract
• Use visual references: "the table in the second section" or "the pricing card on the right"
• For complex pages, take a screenshot first to verify the page state, then extract