Blog de Agentes IA
SISTEMA DE ACCESO INFORMÁTICO

Agentes de Automatización Web: Control del Navegador con Claude y Computer Use

web-automation-agentsbrowser-automation-AIClaude-computer-useagent-web-scrapingvisual-agentagentic-development

Agentes de Automatización Web: Control del Navegador con Claude y Computer Use

Tu empresa necesita datos de un portal de proveedores que no tiene API. Es una aplicación web con contenido dinámico, formularios de múltiples pasos y un diseño que cambia cada pocos meses. Tu script de Selenium se rompe cada vez que actualizan el CSS. Lo mantienes como código legacy — frágil, costoso y nadie quiere tocarlo.

Un agente basado en visión no se preocupa por los selectores CSS. Ve la página, encuentra el botón “Buscar” visualmente, hace clic, lee la tabla de resultados y extrae los datos. Cuando el diseño cambia, el agente se adapta porque lee la página como un humano — no analiza el DOM.

Este artículo te enseña cómo construir agentes de automatización web usando las capacidades de computer use de Claude. Aprenderás la mecánica central de la automatización visual, patrones de navegación confiables, técnicas de extracción de datos, flujos de trabajo para completar formularios y estrategias de recuperación ante errores. Al final, tendrás los patrones necesarios para construir agentes que interactúen con cualquier interfaz web — desde lecturas simples de páginas hasta flujos de trabajo complejos de múltiples pasos.

Automatización Visual vs. Tradicional

Antes de construir un agente basado en visión, necesitas entender cuándo tiene sentido — y cuándo no. Las herramientas de automatización tradicionales como Selenium y Playwright no van a desaparecer. Son rápidas, deterministas y bien conocidas. La pregunta es dónde destaca cada enfoque y dónde falla.

Automatización Tradicional (Selenium/Playwright)

La automatización tradicional del navegador funciona interactuando con el DOM. Localizas elementos usando selectores CSS o expresiones XPath, luego realizas acciones sobre ellos de forma programática:

# Enfoque tradicional — rápido pero frágil
search_input = driver.find_element(By.CSS_SELECTOR, "#search-box-v3 > input.query")
search_input.send_keys("industrial bearings")
driver.find_element(By.CSS_SELECTOR, "button.search-submit-2024").click()

Esto es rápido. Es determinista. Y se rompe en el momento en que alguien renombra search-box-v3 a search-box-v4 o reestructura el diseño del formulario. Terminas manteniendo un mapeo de selectores que refleja la estructura interna del sitio — una estructura que no controlas.

La automatización tradicional tampoco puede manejar contenido exclusivamente visual. Si los datos que necesitas se renderizan en un elemento <canvas>, están incrustados en una imagen o se muestran como un PDF dentro del navegador, los selectores del DOM no pueden alcanzarlos.

Automatización Basada en Visión (Computer Use)

La automatización basada en visión funciona de la misma manera que un humano. El agente recibe una captura de pantalla, identifica visualmente los elementos que necesita y emite acciones de ratón/teclado en coordenadas específicas:

# Enfoque basado en visión — resiliente pero más lento
# El agente ve la página, encuentra el cuadro de búsqueda visualmente y escribe en él
# No se necesitan selectores — se adapta automáticamente a los cambios de diseño

La contrapartida: es más lento (cada acción requiere una llamada a la API con una imagen), más costoso (tokens por las capturas de pantalla) y no determinista (el agente podría interpretar una captura de pantalla de forma diferente entre ejecuciones). Pero es resiliente a los cambios de diseño, funciona en cualquier interfaz visual y puede entender el contenido de la página semánticamente.

El Enfoque Híbrido

La estrategia más práctica combina ambos:

  • Usa automatización tradicional para páginas estables y bien estructuradas donde controlas la interfaz o rara vez cambia.
  • Usa automatización basada en visión para páginas dinámicas, interfaces desconocidas, contenido visual o tareas puntuales que no justifican mantener scripts.
  • Usa visión como respaldo — intenta primero con un selector; si falla, recurre a la identificación visual.

Cuándo Elegir Visión

La automatización basada en visión es la elección correcta cuando:

  • No hay API disponible y la interfaz web es tu única opción
  • El diseño de la página cambia frecuentemente y el mantenimiento de selectores es demasiado costoso
  • El contenido es visual — gráficos, imágenes, elementos canvas, PDFs incrustados
  • Los flujos de trabajo de múltiples pasos requieren contexto — entender qué hay en pantalla para decidir la siguiente acción
  • Automatizaciones puntuales que no justifican el costo de ingeniería de un script de Selenium mantenido
  • Interfaces desconocidas donde puedes describir la tarea en lenguaje natural en lugar de mapear selectores

Conceptos Básicos de Claude Computer Use

La capacidad de computer use de Claude permite al modelo interactuar con la pantalla de un ordenador de la misma manera que lo haría un humano — observando capturas de pantalla y emitiendo acciones de ratón y teclado. Entender la mecánica es esencial antes de construir agentes confiables.

Cómo Funciona

El bucle de computer use es directo:

  1. Captura una captura de pantalla de la pantalla actual (o ventana del navegador)
  2. Envía la captura de pantalla a Claude junto con una descripción de la tarea
  3. Recibe una llamada a herramienta — Claude te indica qué acción realizar (clic, escribir, desplazar)
  4. Ejecuta la acción en el navegador
  5. Captura una nueva captura de pantalla
  6. Repite hasta que la tarea se complete o el agente señale que ha terminado

Claude nunca controla directamente el navegador. Tu código actúa como intermediario — recibiendo instrucciones del modelo y ejecutándolas en el entorno real.

Definiciones de Herramientas

Computer use se basa en una definición de herramienta específica — computer_20241022 — que describe las acciones disponibles:

computer_tool = {
    "type": "computer_20241022",
    "name": "computer",
    "display_width_px": 1280,
    "display_height_px": 800,
    "display_number": 1,
}

Las acciones disponibles incluyen:

  • screenshot — Capturar el estado actual de la pantalla
  • mouse_move — Mover el cursor a coordenadas específicas
  • left_click / right_click / double_click — Hacer clic en la posición actual del cursor
  • left_click_drag — Hacer clic y arrastrar a una posición destino
  • type — Escribir una cadena de texto
  • key — Presionar una tecla específica o combinación de teclas (p. ej., Return, ctrl+a)
  • scroll — Desplazarse hacia arriba o abajo en la posición actual del cursor

El Bucle de Acciones

Aquí tienes una implementación completa del bucle central de computer use:

import anthropic
import base64
import subprocess
import time


client = anthropic.Anthropic()


def capture_screenshot() -> str:
    """Capture screen and return base64-encoded PNG."""
    # Using scrot for X11; adapt for your environment
    subprocess.run(["scrot", "/tmp/screenshot.png"], check=True)
    with open("/tmp/screenshot.png", "rb") as f:
        return base64.standard_b64encode(f.read()).decode("utf-8")


def execute_action(action: dict):
    """Execute a computer use action using xdotool."""
    action_type = action.get("action")


    if action_type == "screenshot":
        return  # Screenshot will be taken in the main loop


    elif action_type == "mouse_move":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])


    elif action_type == "left_click":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        subprocess.run(["xdotool", "click", "1"])


    elif action_type == "type":
        text = action["text"]
        subprocess.run(["xdotool", "type", "--clearmodifiers", text])


    elif action_type == "key":
        key = action["key"]
        subprocess.run(["xdotool", "key", key])


    elif action_type == "scroll":
        x, y = action["coordinate"]
        direction = action["direction"]
        amount = action["amount"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        button = "5" if direction == "down" else "4"
        for _ in range(amount):
            subprocess.run(["xdotool", "click", button])


    time.sleep(0.5)  # Brief pause after each action


def run_computer_use_agent(task: str, max_steps: int = 50):
    """Run a computer use agent loop."""
    messages = [{"role": "user", "content": task}]


    for step in range(max_steps):
        # Capture current screen state
        screenshot_b64 = capture_screenshot()


        # Add screenshot to the conversation
        if step > 0:
            messages.append({
                "role": "user",
                "content": [{
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",
                        "data": screenshot_b64,
                    },
                }],
            })


        # Call Claude with computer use tool
        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=4096,
            tools=[computer_tool],
            messages=messages,
        )


        # Process response
        messages.append({"role": "assistant", "content": response.content})


        # Check if the agent is done
        if response.stop_reason == "end_turn":
            # Extract final text response
            for block in response.content:
                if hasattr(block, "text"):
                    return block.text
            return "Task completed."


        # Execute tool calls
        tool_results = []
        for block in response.content:
            if block.type == "tool_use":
                print(f"Step {step}: {block.input.get('action')} "
                      f"{block.input.get('coordinate', '')}")
                execute_action(block.input)
                tool_results.append({
                    "type": "tool_result",
                    "tool_use_id": block.id,
                    "content": "Action executed successfully.",
                })


        messages.append({"role": "user", "content": tool_results})


    return "Max steps reached."

Resolución y Sistema de Coordenadas

Claude mapea el contenido visual a coordenadas de píxeles x,y basándose en las dimensiones de captura de pantalla que especificas en la definición de la herramienta. Algunos detalles críticos:

  • Haz coincidir la resolución de tu pantalla con display_width_px y display_height_px en la definición de la herramienta. Las discrepancias hacen que los clics caigan en los lugares incorrectos.
  • Las resoluciones más bajas son mejores. Una captura de pantalla de 1280×800 le da a Claude suficiente detalle para leer texto e identificar elementos de la interfaz mientras mantiene los costos de tokens manejables. No envíes capturas de pantalla en 4K.
  • Las coordenadas son absolutas — (0, 0) es la esquina superior izquierda de la pantalla.

Patrones de Navegación Confiables

Los sitios web del mundo real son desordenados. Las páginas se cargan de forma asíncrona, los popups aparecen de manera impredecible y el contenido dinámico cambia el diseño a mitad de la interacción. Un agente de automatización confiable necesita patrones para manejar todo esto.

Esperar la Carga

El error más común en la automatización web — tradicional o visual — es actuar antes de que la página esté lista. No uses llamadas fijas de time.sleep(). En su lugar, verifica el estado de la página visualmente:

def wait_for_page_load(
    client: anthropic.Anthropic,
    expected_content: str,
    max_retries: int = 5,
    delay: float = 2.0,
) -> bool:
    """Wait for a page to load by checking for expected visual content."""
    for attempt in range(max_retries):
        screenshot_b64 = capture_screenshot()


        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=256,
            messages=[{
                "role": "user",
                "content": [
                    {
                        "type": "image",
                        "source": {
                            "type": "base64",
                            "media_type": "image/png",
                            "data": screenshot_b64,
                        },
                    },
                    {
                        "type": "text",
                        "text": (
                            f"Is this page fully loaded and showing: "
                            f"'{expected_content}'? "
                            f"Reply with only 'yes' or 'no'."
                        ),
                    },
                ],
            }],
        )


        answer = response.content[0].text.strip().lower()
        if "yes" in answer:
            return True


        print(f"Page not ready (attempt {attempt + 1}/{max_retries}). Waiting...")
        time.sleep(delay)


    return False

Manejo de Popups

Los banners de cookies, los diálogos de notificaciones y los widgets de chat son la pesadilla de la automatización web. Un agente basado en visión los maneja de forma natural:

def dismiss_popups(client: anthropic.Anthropic) -> bool:
    """Check for and dismiss any popup overlays."""
    screenshot_b64 = capture_screenshot()


    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=

Artículos Relacionados