Web-Automatisierungsagenten: Browsersteuerung mit Claude und Computer Use

Ihr Unternehmen benötigt Daten von einem Lieferantenportal, das keine API hat. Es ist eine Web-App mit dynamischen Inhalten, mehrstufigen Formularen und einem Layout, das sich alle paar Monate ändert. Ihr Selenium-Skript bricht jedes Mal, wenn das CSS aktualisiert wird. Sie pflegen es wie Legacy-Code — fragil, teuer, und niemand will es anfassen.

Ein visionsbasierter Agent kümmert sich nicht um CSS-Selektoren. Er sieht die Seite, findet den „Suchen”-Button visuell, klickt darauf, liest die Ergebnistabelle und extrahiert die Daten. Wenn sich das Layout ändert, passt sich der Agent an, weil er die Seite wie ein Mensch liest — nicht das DOM parst.

Dieser Artikel zeigt Ihnen, wie Sie Web-Automatisierungsagenten mit Claudes Computer-Use-Fähigkeiten erstellen. Sie lernen die Kernmechanismen der visuellen Automatisierung, zuverlässige Navigationsmuster, Datenextraktionstechniken, Formular-Ausfüll-Workflows und Strategien zur Fehlerbehandlung. Am Ende verfügen Sie über die Muster, die nötig sind, um Agenten zu bauen, die mit jeder Web-Oberfläche interagieren — von einfachen Seitenabfragen bis hin zu komplexen mehrstufigen Workflows.

Visuell vs. Traditionelle Automatisierung

Bevor Sie einen visionsbasierten Agenten erstellen, müssen Sie verstehen, wann er sinnvoll ist — und wann nicht. Traditionelle Automatisierungstools wie Selenium und Playwright verschwinden nicht. Sie sind schnell, deterministisch und gut verstanden. Die Frage ist, wo jeder Ansatz glänzt und wo er an seine Grenzen stößt.

Traditionelle Automatisierung (Selenium/Playwright)

Traditionelle Browser-Automatisierung funktioniert durch Interaktion mit dem DOM. Sie lokalisieren Elemente mithilfe von CSS-Selektoren oder XPath-Ausdrücken und führen dann programmgesteuert Aktionen darauf aus:

# 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()

Das ist schnell. Es ist deterministisch. Und es bricht in dem Moment, in dem jemand search-box-v3 in search-box-v4 umbenennt oder das Formularlayout umstrukturiert. Am Ende pflegen Sie eine Zuordnung von Selektoren, die die interne Struktur der Website spiegelt — eine Struktur, die Sie nicht kontrollieren.

Traditionelle Automatisierung kann auch keine rein visuellen Inhalte verarbeiten. Wenn die benötigten Daten in einem <canvas>-Element gerendert, in ein Bild eingebettet oder als PDF im Browser angezeigt werden, können DOM-Selektoren sie nicht erreichen.

Visionsbasierte Automatisierung (Computer Use)

Visionsbasierte Automatisierung funktioniert so, wie ein Mensch es tut. Der Agent empfängt einen Screenshot, identifiziert visuell die benötigten Elemente und gibt Maus-/Tastaturaktionen an bestimmten Koordinaten aus:

# 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

Der Kompromiss: Es ist langsamer (jede Aktion erfordert einen API-Aufruf mit einem Bild), teurer (Tokens für Screenshots) und nicht-deterministisch (der Agent könnte einen Screenshot zwischen Durchläufen unterschiedlich interpretieren). Aber es ist resilient gegenüber Layout-Änderungen, funktioniert auf jeder visuellen Oberfläche und kann Seiteninhalte semantisch verstehen.

Der hybride Ansatz

Die praktischste Strategie kombiniert beide:

• Verwenden Sie traditionelle Automatisierung für stabile, gut strukturierte Seiten, bei denen Sie die Oberfläche kontrollieren oder sie sich selten ändert.
• Verwenden Sie visionsbasierte Automatisierung für dynamische Seiten, unbekannte Oberflächen, visuelle Inhalte oder einmalige Aufgaben, für die sich die Pflege von Skripten nicht lohnt.
• Verwenden Sie Vision als Fallback — probieren Sie zuerst einen Selektor; wenn er fehlschlägt, greifen Sie auf visuelle Identifikation zurück.

Wann Sie Vision wählen sollten

Visionsbasierte Automatisierung ist die richtige Wahl, wenn:

• Keine API verfügbar ist und die Web-Oberfläche Ihre einzige Option ist
• Das Seitenlayout sich häufig ändert und die Selektor-Pflege zu teuer ist
• Inhalte visuell sind — Diagramme, Bilder, Canvas-Elemente, eingebettete PDFs
• Mehrstufige Workflows Kontext erfordern — zu verstehen, was auf dem Bildschirm ist, um die nächste Aktion zu entscheiden
• Einmalige Automatisierungen, die den Entwicklungsaufwand eines gepflegten Selenium-Skripts nicht rechtfertigen
• Unbekannte Oberflächen, bei denen Sie die Aufgabe in natürlicher Sprache beschreiben können, anstatt Selektoren zuzuordnen

Grundlagen von Claude Computer Use

Claudes Computer-Use-Fähigkeit ermöglicht es dem Modell, mit einem Computerbildschirm genauso zu interagieren wie ein Mensch — indem es Screenshots betrachtet und Maus- sowie Tastaturaktionen ausführt. Das Verständnis der Mechanik ist essenziell, bevor Sie zuverlässige Agenten bauen.

Funktionsweise

Die Computer-Use-Schleife ist unkompliziert:

1. Erfassen Sie einen Screenshot des aktuellen Bildschirms (oder Browserfensters)
2. Senden Sie den Screenshot zusammen mit einer Aufgabenbeschreibung an Claude
3. Empfangen Sie einen Tool-Aufruf — Claude teilt Ihnen mit, welche Aktion ausgeführt werden soll (Klicken, Tippen, Scrollen)
4. Führen Sie die Aktion im Browser aus
5. Erfassen Sie einen neuen Screenshot
6. Wiederholen Sie, bis die Aufgabe abgeschlossen ist oder der Agent signalisiert, dass er fertig ist

Claude steuert niemals direkt den Browser. Ihr Code fungiert als Vermittler — empfängt Anweisungen vom Modell und führt sie in der realen Umgebung aus.

Tool-Definitionen

Computer Use basiert auf einer spezifischen Tool-Definition — computer_20241022 — die die verfügbaren Aktionen beschreibt:

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

Die verfügbaren Aktionen umfassen:

• screenshot — Aktuellen Bildschirmzustand erfassen
• mouse_move — Cursor zu bestimmten Koordinaten bewegen
• left_click / right_click / double_click — An der aktuellen Cursorposition klicken
• left_click_drag — Klicken und zu einer Zielposition ziehen
• type — Eine Zeichenkette eingeben
• key — Eine bestimmte Taste oder Tastenkombination drücken (z.B. Return, ctrl+a)
• scroll — An der aktuellen Cursorposition nach oben oder unten scrollen

Die Aktionsschleife

Hier ist eine vollständige Implementierung der Kern-Computer-Use-Schleife:

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

Auflösung und Koordinatensystem

Claude ordnet visuelle Inhalte x,y-Pixelkoordinaten basierend auf den Screenshot-Dimensionen zu, die Sie in der Tool-Definition angeben. Einige kritische Details:

• Passen Sie Ihre Bildschirmauflösung an display_width_px und display_height_px in der Tool-Definition an. Abweichungen führen dazu, dass Klicks an der falschen Stelle landen.
• Niedrigere Auflösungen sind besser. Ein 1280×800-Screenshot gibt Claude genug Detail, um Text zu lesen und UI-Elemente zu identifizieren, während die Token-Kosten überschaubar bleiben. Senden Sie keine 4K-Screenshots.
• Koordinaten sind absolut — (0, 0) ist die obere linke Ecke des Bildschirms.

Zuverlässige Navigationsmuster

Reale Websites sind unordentlich. Seiten laden asynchron, Popups erscheinen unvorhersehbar und dynamische Inhalte ändern das Layout mitten in der Interaktion. Ein zuverlässiger Automatisierungsagent braucht Muster, um all das zu bewältigen.

Auf Laden warten

Der häufigste Fehler bei der Web-Automatisierung — traditionell oder visuell — ist zu handeln, bevor die Seite bereit ist. Verwenden Sie keine festen time.sleep()-Aufrufe. Stattdessen überprüfen Sie den Seitenzustand visuell:

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

Popup-Behandlung

Cookie-Banner, Benachrichtigungsdialoge und Chat-Widgets sind der Fluch der Web-Automatisierung. Ein visionsbasierter Agent geht damit natürlich um:

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=

Verwandte Artikel

• Agent-Fehlerbehandlung: 5 Muster für Produktionszuverlässigkeit
• Streaming von Agent-Antworten: Echtzeit-Ausgabe für mehrstufige Workflows
• Tool-Nutzungsmuster: Zuverlässige Agent-Tool-Schnittstellen entwickeln
• Einführung in die Agentische Entwicklung