7 mars 2026

Agents d'automatisation web : contrôle du navigateur avec Claude et Computer Use

Agents d’automatisation web : contrôle du navigateur avec Claude et Computer Use

Votre entreprise a besoin de données provenant d’un portail fournisseur qui n’a pas d’API. C’est une application web avec du contenu dynamique, des formulaires multi-étapes et une mise en page qui change tous les quelques mois. Votre script Selenium casse à chaque mise à jour du CSS. Vous le maintenez comme du code legacy — fragile, coûteux, et personne ne veut y toucher.

Un agent basé sur la vision ne se soucie pas des sélecteurs CSS. Il voit la page, trouve visuellement le bouton « Rechercher », clique dessus, lit le tableau de résultats et extrait les données. Quand la mise en page change, l’agent s’adapte parce qu’il lit la page comme un humain — pas en analysant le DOM.

Cet article vous apprend à construire des agents d’automatisation web en utilisant les capacités d’utilisation d’ordinateur de Claude. Vous apprendrez les mécanismes fondamentaux de l’automatisation visuelle, les patterns de navigation fiables, les techniques d’extraction de données, les workflows de remplissage de formulaires et les stratégies de récupération d’erreurs. À la fin, vous disposerez des patterns nécessaires pour construire des agents qui interagissent avec n’importe quelle interface web — de la simple lecture de page aux workflows complexes multi-étapes.

Automatisation visuelle vs. traditionnelle

Avant de construire un agent basé sur la vision, vous devez comprendre quand cela a du sens — et quand ce n’est pas le cas. Les outils d’automatisation traditionnels comme Selenium et Playwright ne vont pas disparaître. Ils sont rapides, déterministes et bien compris. La question est de savoir où chaque approche excelle et où elle atteint ses limites.

Automatisation traditionnelle (Selenium/Playwright)

L’automatisation traditionnelle du navigateur fonctionne en interagissant avec le DOM. Vous localisez des éléments à l’aide de sélecteurs CSS ou d’expressions XPath, puis vous effectuez des actions dessus de manière programmatique :

# Traditional approach — fast but brittle
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()

C’est rapide. C’est déterministe. Et ça casse dès que quelqu’un renomme search-box-v3 en search-box-v4 ou restructure la mise en page du formulaire. Vous finissez par maintenir une correspondance de sélecteurs qui reflète la structure interne du site — une structure que vous ne contrôlez pas.

L’automatisation traditionnelle ne peut pas non plus gérer le contenu purement visuel. Si les données dont vous avez besoin sont rendues dans un élément <canvas>, intégrées dans une image ou affichées sous forme de PDF dans le navigateur, les sélecteurs DOM ne peuvent pas y accéder.

Automatisation visuelle (Computer Use)

L’automatisation visuelle fonctionne comme un humain. L’agent reçoit une capture d’écran, identifie visuellement les éléments dont il a besoin et émet des actions souris/clavier à des coordonnées spécifiques :

# Vision-based approach — resilient but slower
# Agent sees the page, finds the search box visually, and types into it
# No selectors needed — it adapts to layout changes automatically

Le compromis : c’est plus lent (chaque action nécessite un appel API avec une image), plus coûteux (tokens pour les captures d’écran) et non déterministe (l’agent peut interpréter une capture d’écran différemment d’une exécution à l’autre). Mais c’est résilient aux changements de mise en page, fonctionne sur n’importe quelle interface visuelle et peut comprendre sémantiquement le contenu de la page.

L’approche hybride

La stratégie la plus pratique combine les deux :

Utilisez l’automatisation traditionnelle pour les pages stables et bien structurées où vous contrôlez l’interface ou qu’elle change rarement.
Utilisez l’automatisation visuelle pour les pages dynamiques, les interfaces inconnues, le contenu visuel ou les tâches ponctuelles qui ne justifient pas la maintenance de scripts.
Utilisez la vision comme solution de secours — essayez d’abord un sélecteur ; s’il échoue, recourez à l’identification visuelle.

Quand choisir la vision

L’automatisation visuelle est le bon choix quand :

Aucune API n’est disponible et l’interface web est votre seule option
La mise en page change fréquemment et la maintenance des sélecteurs est trop coûteuse
Le contenu est visuel — graphiques, images, éléments canvas, PDFs intégrés
Les workflows multi-étapes nécessitent du contexte — comprendre ce qui est à l’écran pour décider de l’action suivante
Les automatisations ponctuelles qui ne justifient pas le coût d’ingénierie d’un script Selenium maintenu
Les interfaces inconnues où vous pouvez décrire la tâche en langage naturel plutôt que de mapper des sélecteurs

Fondamentaux de Claude Computer Use

La capacité d’utilisation d’ordinateur de Claude permet au modèle d’interagir avec un écran d’ordinateur de la même manière qu’un humain — en regardant des captures d’écran et en émettant des actions souris et clavier. Comprendre les mécanismes est essentiel avant de construire des agents fiables.

Comment ça fonctionne

La boucle d’utilisation de l’ordinateur est simple :

Capturer une capture d’écran de l’écran actuel (ou de la fenêtre du navigateur)
Envoyer la capture d’écran à Claude accompagnée d’une description de la tâche
Recevoir un appel d’outil — Claude vous indique quelle action effectuer (cliquer, taper, défiler)
Exécuter l’action dans le navigateur
Capturer une nouvelle capture d’écran
Répéter jusqu’à ce que la tâche soit terminée ou que l’agent signale qu’il a fini

Claude ne contrôle jamais directement le navigateur. Votre code agit comme intermédiaire — recevant les instructions du modèle et les exécutant dans l’environnement réel.

Définitions des outils

L’utilisation de l’ordinateur repose sur une définition d’outil spécifique — computer_20241022 — qui décrit les actions disponibles :

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

Les actions disponibles comprennent :

screenshot — Capturer l’état actuel de l’écran
mouse_move — Déplacer le curseur vers des coordonnées spécifiques
left_click / right_click / double_click — Cliquer à la position actuelle du curseur
left_click_drag — Cliquer et glisser vers une position cible
type — Taper une chaîne de texte
key — Appuyer sur une touche ou combinaison de touches spécifique (ex. Return, ctrl+a)
scroll — Défiler vers le haut ou le bas à la position actuelle du curseur

La boucle d’actions

Voici une implémentation complète de la boucle principale d’utilisation de l’ordinateur :

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

Résolution et système de coordonnées

Claude fait correspondre le contenu visuel à des coordonnées x,y en pixels basées sur les dimensions de la capture d’écran que vous spécifiez dans la définition de l’outil. Quelques détails critiques :

Faites correspondre votre résolution d’affichage aux display_width_px et display_height_px dans la définition de l’outil. Les décalages font atterrir les clics au mauvais endroit.
Les résolutions plus basses sont préférables. Une capture d’écran de 1280×800 donne à Claude suffisamment de détails pour lire le texte et identifier les éléments d’interface tout en maintenant des coûts de tokens raisonnables. N’envoyez pas de captures d’écran en 4K.
Les coordonnées sont absolues — (0, 0) est le coin supérieur gauche de l’écran.

Les sites web réels sont désordonnés. Les pages se chargent de manière asynchrone, les popups apparaissent de manière imprévisible et le contenu dynamique modifie la mise en page en pleine interaction. Un agent d’automatisation fiable a besoin de patterns pour gérer tout cela.

Attendre le chargement

L’erreur la plus courante en automatisation web — traditionnelle ou visuelle — est d’agir avant que la page ne soit prête. N’utilisez pas d’appels time.sleep() fixes. Vérifiez plutôt l’état de la page visuellement :

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

Gestion des popups

Les bannières de cookies, les dialogues de notification et les widgets de chat sont la bête noire de l’automatisation web. Un agent basé sur la vision les gère naturellement :

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=