Cómo usar OpenClaw para automatización del navegador

Lo que vas a construir

Una configuración de automatización del navegador que permite a OpenClaw:

1. Navegar por sitios web — abrir páginas, hacer clic en botones, rellenar formularios, desplazarse por el contenido
2. Extraer datos — hacer scraping de datos estructurados de páginas web, tablas y dashboards
3. Tomar capturas de pantalla — capturar capturas de página completa o de elementos específicos para reportes
4. Ejecutar flujos de trabajo multietapa — encadenar acciones del navegador en secuencias de automatización complejas

Al terminar esta guía, podrás automatizar cualquier tarea del navegador describiendo lo que necesitas en lenguaje natural.

Por qué usar IA para la automatización del navegador

Las herramientas tradicionales de automatización del navegador (Selenium, Puppeteer, Playwright) son potentes, pero requieren escribir y mantener código para cada flujo de trabajo. Cuando el sitio web cambia su diseño, tus scripts se rompen. Cuando necesitas un nuevo flujo de trabajo, escribes un nuevo script.

La automatización del navegador con IA cambia esto:

• Instrucciones en lenguaje natural — describe lo que quieres en lugar de escribir selectores y manejadores de clics
• Auto-reparación — la IA se adapta a cambios en la interfaz sin actualizar scripts
• Sin mantenimiento de código — los flujos de trabajo se definen por intención, no por implementación
• Prototipado rápido — configura una nueva automatización en minutos, no en horas
• Comprensión visual — la IA puede interpretar el diseño de la página, leer texto de capturas de pantalla y tomar decisiones basándose en lo que ve

Requisitos previos

• OpenClaw instalado y configurado (Guía de inicio rápido)
• Chrome o Chromium instalado en tu sistema
• Node.js 18+

Paso 1: Instalar los Skills necesarios

# 1. Control del navegador
npx clawhub@latest install browser-use

# 2. Extracción de datos web
npx clawhub@latest install web-scraper

# 3. Captura de pantalla
npx clawhub@latest install screenshot

Paso 2: Verificar la configuración del navegador

El skill browser-use necesita una instalación de Chrome/Chromium:

clawhub inspect browser-use

Esto verifica la existencia de un navegador compatible y muestra la ruta detectada. Si Chrome no se encuentra automáticamente, configura la ruta manualmente en la configuración del skill.

Paso 3: Automatización del navegador en acción

Ejemplo 1: Extraer datos de un dashboard

Supón que necesitas obtener métricas de un dashboard web cada mañana:

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.

El skill del navegador se encarga del login, la navegación y la extracción de datos. El resultado es una tabla Markdown limpia que puedes pegar en reportes o Slack.

Ejemplo 2: Monitorear la página de precios de un competidor

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

Salida:

{
  "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"]
    }
  ]
}

Ejemplo 3: Rellenar un formulario

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.

Ejemplo 4: Flujo de trabajo de investigación multietapa

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

Paso 4: Capturas de pantalla para reportes

El skill de capturas captura evidencia visual para reportes y monitoreo:

# Captura de página completa
clawhub run screenshot --url "https://status.example.com" --full-page

# Elemento específico
clawhub run screenshot --url "https://grafana.example.com/d/api-latency" --selector ".panel-container"

# Múltiples páginas
clawhub run screenshot --urls "url1,url2,url3" --output "./screenshots/"

Monitoreo visual programado

Combínalo con cron para capturar snapshots diarios:

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

Avanzado: Flujos de trabajo complejos

Encadenar acciones del navegador

Para flujos de trabajo multietapa que necesitan ejecutarse de forma fiable:

# .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"

Gestión de autenticación

Para sitios que requieren login:

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

Usa clawhub credentials set analytics_dashboard para almacenar las credenciales de forma segura.

Trabajar con SPAs y contenido dinámico

Las aplicaciones de página única (SPA) modernas cargan contenido de forma dinámica. El skill del navegador maneja esto automáticamente al:

• Esperar a que las peticiones de red se completen
• Detectar cuándo la página está completamente renderizada
• Reintentar si el contenido aún no se ha cargado

Para páginas particularmente lentas, puedes establecer condiciones de espera explícitas:

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

Solución de problemas

El navegador no se inicia

• Verifica que Chrome/Chromium está instalado: which google-chrome o which chromium
• Comprueba la ruta en la configuración del skill: clawhub inspect browser-use
• En servidores headless, asegúrate de que el flag --no-sandbox está habilitado en la configuración

El contenido de la página no carga

• Algunas páginas requieren JavaScript — el skill del navegador ejecuta un navegador completo, así que esto debería funcionar por defecto
• Revisa si hay banners de consentimiento de cookies bloqueando el contenido
• Verifica que la URL es accesible desde tu máquina (VPN, firewall)

Las capturas de pantalla salen en blanco o incompletas

• Añade un tiempo de espera antes de la captura: la página puede estar aún renderizándose
• Usa el flag --full-page para páginas que requieren scroll
• Comprueba si la página requiere autenticación

La extracción devuelve datos incorrectos

• Sé más específico sobre qué elemento extraer
• Usa referencias visuales: "la tabla en la segunda sección" o "la tarjeta de precios a la derecha"
• Para páginas complejas, toma una captura de pantalla primero para verificar el estado de la página, y luego extrae