Agenti di Automazione Web: Controllo del Browser con Claude e Computer Use

La tua azienda ha bisogno di dati da un portale fornitori che non ha API. È un’applicazione web con contenuti dinamici, moduli multi-step e un layout che cambia ogni pochi mesi. Il tuo script Selenium si rompe ogni volta che aggiornano il CSS. Lo mantieni come codice legacy — fragile, costoso, e nessuno vuole toccarlo.

Un agente basato sulla visione non si preoccupa dei selettori CSS. Vede la pagina, trova visivamente il pulsante “Cerca”, ci clicca sopra, legge la tabella dei risultati ed estrae i dati. Quando il layout cambia, l’agente si adatta perché legge la pagina come un essere umano — non analizzando il DOM.

Questo articolo ti insegna come costruire agenti di automazione web utilizzando le capacità computer use di Claude. Imparerai i meccanismi fondamentali dell’automazione visiva, i pattern affidabili di navigazione, le tecniche di estrazione dati, i flussi di lavoro per la compilazione di moduli e le strategie di recupero dagli errori. Alla fine, avrai i pattern necessari per costruire agenti che interagiscono con qualsiasi interfaccia web — dalla semplice lettura di pagine a flussi di lavoro complessi multi-step.

Automazione Visiva vs. Tradizionale

Prima di costruire un agente basato sulla visione, devi capire quando ha senso — e quando no. Gli strumenti di automazione tradizionali come Selenium e Playwright non stanno scomparendo. Sono veloci, deterministici e ben compresi. La domanda è dove eccelle ciascun approccio e dove si inceppa.

Automazione Tradizionale (Selenium/Playwright)

L’automazione tradizionale del browser funziona interagendo con il DOM. Si localizzano gli elementi usando selettori CSS o espressioni XPath, poi si eseguono azioni su di essi programmaticamente:

# Approccio tradizionale — veloce ma fragile
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()

È veloce. È deterministico. E si rompe nel momento in cui qualcuno rinomina search-box-v3 in search-box-v4 o ristruttura il layout del form. Finisci per mantenere una mappatura di selettori che rispecchia la struttura interna del sito — una struttura che non controlli.

L’automazione tradizionale inoltre non può gestire contenuti esclusivamente visivi. Se i dati di cui hai bisogno sono renderizzati in un elemento <canvas>, incorporati in un’immagine o visualizzati come PDF all’interno del browser, i selettori DOM non possono raggiungerli.

Automazione Basata sulla Visione (Computer Use)

L’automazione basata sulla visione funziona come farebbe un essere umano. L’agente riceve uno screenshot, identifica visivamente gli elementi necessari ed emette azioni di mouse/tastiera a coordinate specifiche:

# Approccio basato sulla visione — resiliente ma più lento
# L'agente vede la pagina, trova visivamente la casella di ricerca e digita al suo interno
# Nessun selettore necessario — si adatta automaticamente ai cambiamenti di layout

Il compromesso: è più lento (ogni azione richiede una chiamata API con un’immagine), più costoso (token per gli screenshot) e non deterministico (l’agente potrebbe interpretare uno screenshot in modo diverso tra un’esecuzione e l’altra). Ma è resiliente ai cambiamenti di layout, funziona su qualsiasi interfaccia visiva e può comprendere il contenuto della pagina semanticamente.

L’Approccio Ibrido

La strategia più pratica combina entrambi:

• Usa l’automazione tradizionale per pagine stabili e ben strutturate dove controlli l’interfaccia o cambia raramente.
• Usa l’automazione basata sulla visione per pagine dinamiche, interfacce sconosciute, contenuti visivi o attività una tantum per cui non vale la pena mantenere script.
• Usa la visione come fallback — prova prima un selettore; se fallisce, ricorri all’identificazione visiva.

Quando Scegliere la Visione

L’automazione basata sulla visione è la scelta giusta quando:

• Non è disponibile alcuna API e l’interfaccia web è la tua unica opzione
• Il layout della pagina cambia frequentemente e la manutenzione dei selettori è troppo costosa
• Il contenuto è visivo — grafici, immagini, elementi canvas, PDF incorporati
• Flussi di lavoro multi-step richiedono contesto — capire cosa c’è sullo schermo per decidere l’azione successiva
• Automazioni una tantum che non giustificano il costo ingegneristico di uno script Selenium mantenuto
• Interfacce sconosciute dove puoi descrivere il compito in linguaggio naturale invece di mappare selettori

Fondamenti di Claude Computer Use

La capacità computer use di Claude permette al modello di interagire con lo schermo di un computer nello stesso modo in cui lo farebbe un essere umano — guardando screenshot ed emettendo azioni di mouse e tastiera. Comprendere i meccanismi è essenziale prima di costruire agenti affidabili.

Come Funziona

Il ciclo di computer use è lineare:

1. Cattura uno screenshot dello schermo corrente (o della finestra del browser)
2. Invia lo screenshot a Claude insieme a una descrizione del compito
3. Ricevi una chiamata tool — Claude ti dice quale azione eseguire (click, digitazione, scroll)
4. Esegui l’azione nel browser
5. Cattura un nuovo screenshot
6. Ripeti finché il compito non è completato o l’agente segnala che ha finito

Claude non controlla mai direttamente il browser. Il tuo codice funge da intermediario — ricevendo istruzioni dal modello ed eseguendole nell’ambiente reale.

Definizioni dei Tool

Computer use si basa su una definizione tool specifica — computer_20241022 — che descrive le azioni disponibili:

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

Le azioni disponibili includono:

• screenshot — Cattura lo stato corrente dello schermo
• mouse_move — Sposta il cursore a coordinate specifiche
• left_click / right_click / double_click — Click alla posizione corrente del cursore
• left_click_drag — Click e trascinamento verso una posizione target
• type — Digita una stringa di testo
• key — Premi un tasto specifico o una combinazione di tasti (es. Return, ctrl+a)
• scroll — Scorri verso l’alto o verso il basso alla posizione corrente del cursore

Il Ciclo di Azioni

Ecco un’implementazione completa del ciclo fondamentale di 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."

Risoluzione e Sistema di Coordinate

Claude mappa il contenuto visivo su coordinate pixel x,y basate sulle dimensioni dello screenshot specificate nella definizione del tool. Alcuni dettagli critici:

• Fai corrispondere la risoluzione del display con display_width_px e display_height_px nella definizione del tool. Le discrepanze causano click nel posto sbagliato.
• Risoluzioni più basse sono migliori. Uno screenshot 1280×800 fornisce a Claude dettaglio sufficiente per leggere il testo e identificare gli elementi dell’interfaccia mantenendo gestibili i costi dei token. Non inviare screenshot in 4K.
• Le coordinate sono assolute — (0, 0) è l’angolo in alto a sinistra dello schermo.

Pattern di Navigazione Affidabili

I siti web reali sono caotici. Le pagine si caricano in modo asincrono, i popup appaiono in modo imprevedibile e i contenuti dinamici cambiano il layout durante l’interazione. Un agente di automazione affidabile necessita di pattern per gestire tutto questo.

Attesa del Caricamento

L’errore più comune nell’automazione web — tradizionale o visiva — è agire prima che la pagina sia pronta. Non usare chiamate fisse time.sleep(). Invece, verifica lo stato della pagina visivamente:

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

Gestione dei Popup

Banner dei cookie, finestre di dialogo per le notifiche e widget di chat sono la rovina dell’automazione web. Un agente basato sulla visione li gestisce naturalmente:

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=

Articoli Correlati

• Recupero Errori degli Agenti: 5 Pattern per l’Affidabilità in Produzione
• Risposte in Streaming degli Agenti: Output in Tempo Reale per Workflow Multi-Step
• Pattern di Utilizzo degli Strumenti: Interfacce Agente-Strumento Affidabili
• Introduzione allo Sviluppo Agentico