Browser-Automatisierung

OpenClaw enthält ein leistungsstarkes Browser-Automatisierungs-Tool, das deinen Agenten mit Websites interagieren lässt wie ein Mensch. Klicke Buttons, fülle Formulare aus, extrahiere Daten und navigiere durch komplexe Workflows. Alles ohne dein Chat-Interface zu verlassen.

Dieser Guide deckt alles ab, von der grundlegenden Browser-Steuerung bis hin zu fortgeschrittenen Authentifizierungs-Workflows und der Behebung häufiger Probleme auf Linux und WSL2.

Was du tun kannst

Das Browser-Tool eröffnet eine Welt voller Automatisierungsmöglichkeiten:

• Datenextraktion: Scrape Informationen von Websites, die keine APIs anbieten
• Formular-Automatisierung: Fülle und sende Formulare automatisch aus
• Login-Workflows: Automatisiere Authentifizierung für Zugriff auf geschützte Inhalte
• Testing: Verifiziere, dass Web-Anwendungen korrekt funktionieren
• Monitoring: Überwache Website-Status und Content-Änderungen
• Datei-Downloads: Lade Dateien herunter, die Interaktion erfordern

Grundlegende Browser-Steuerung

OpenClaw verwendet Playwright unter der Haube für zuverlässige Browser-Automatisierung. Das Browser-Tool bietet eine vereinfachte Schnittstelle bei voller Leistung.

Eine Seite öffnen

Beginne mit der Navigation zu einer URL. Das Browser-Tool startet einen Headless-Browser und lädt die Seite.

// Zu einer Website navigieren
browser open https://example.com

// Der Agent sieht den Seiteninhalt
// und kann mit Elementen interagieren

Elemente anklicken

Klicke Buttons, Links oder beliebige klickbare Elemente mit natürlichen Sprachbeschreibungen oder Selektoren.

// Per Text klicken
browser click "Anmelden-Button"

// Per ARIA-Rolle klicken
browser click role=button name="Absenden"

// Per CSS-Selektor klicken
browser click selector="#login-button"

Formulare ausfüllen

Gib Text in Eingabefelder ein, bevor du Formulare absendest.

// Eingabefelder ausfüllen
browser type "E-Mail-Adresse" with "user@example.com"
browser type "Passwort" with "dein-passwort"

// Formular absenden
browser click "Anmelden-Button"

Daten extrahieren

Ziehe Informationen aus der Seite für weitere Verarbeitung.

// Seiteninhalt abrufen
browser snapshot

// Spezifische Elemente extrahieren
browser extract text from "h1"
browser extract all links

Authentifizierungs-Workflows

Viele nützliche Automatisierungen erfordern zuerst ein Login. Hier sind bewährte Muster für die Handhabung von Authentifizierung.

Grundlegender Login-Flow

Der einfachste Ansatz: zur Login-Seite navigieren, Credentials eingeben, absenden.

// Zur Login-Seite navigieren
browser open https://app.example.com/login

// Credentials eingeben
browser type "E-Mail" with "user@example.com"
browser type "Passwort" with "sicheres-passwort"

// Login absenden
browser click "Anmelden"

// Auf Weiterleitung warten
browser wait for navigation

// Verifizieren, dass Login erfolgreich war
browser snapshot

Sitzungs-Persistenz

Um zu vermeiden, dass du dich jedes Mal neu anmelden musst, persistiere die authentifizierte Sitzung.

// Einmal einloggen
browser open https://app.example.com/login
browser type "E-Mail" with "user@example.com"
browser type "Passwort" with "passwort"
browser click "Anmelden"
browser wait for navigation

// Sitzungszustand speichern
browser save session to /workspace/sessions/example-session.json

// Später die Sitzung wiederherstellen
browser open https://app.example.com/
browser load session from /workspace/sessions/example-session.json

Umgang mit Zwei-Faktor-Authentifizierung

Für Websites mit 2FA hast du mehrere Optionen:

• Manuelle Durchführung: Einmal manuell einloggen, dann die Sitzung für die Wiederverwendung persistieren
• Backup-Codes: Einmalige Backup-Codes verwenden, falls die Website sie bereitstellt
• App-Passwörter: Einige Dienste bieten App-spezifische Passwörter, die 2FA umgehen
• TOTP-Integration: TOTP-Codes generieren, wenn du die 2FA-Einrichtung kontrollierst

Fortgeschrittene Techniken

Auf dynamischen Content warten

Moderne Web-Apps laden Content dynamisch. Verwende Wartezeiten, um sicherzustellen, dass Elemente bereit sind.

// Warten, bis Element erscheint
browser wait for "Lade-Spinner" to disappear

// Auf spezifischen Text warten
browser wait for text "Dashboard"

// Auf Netzwerk-Idle warten
browser wait for networkidle

Datei-Uploads

Automatisiere Datei-Uploads durch Angabe des Dateipfads.

// Upload-Button klicken, um Dialog zu öffnen
browser click "Datei hochladen"

// Dateipfad angeben
browser upload "/workspace/files/dokument.pdf"

// Upload bestätigen
browser click "Upload bestätigen"

Umgang mit Popups und Dialogen

Browser zeigen oft Bestätigungsdialoge. Handle sie programmatisch.

// Bestätigungsdialog akzeptieren
browser dialog accept

// Dialog ablehnen
browser dialog dismiss

// Prompt-Dialog ausfüllen
browser dialog type "Eingabewert"
browser dialog accept

Screenshots

Erfasse den visuellen Zustand für Debugging oder Dokumentation.

// Vollständiger Seiten-Screenshot
browser screenshot fullpage

// Element-Screenshot
browser screenshot element "Chart-Container"

// Viewport-Screenshot
browser screenshot

Linux- und WSL2-Einrichtung

Browser-Automatisierung erfordert zusätzliche Einrichtung auf Linux- und Windows-WSL2-Umgebungen.

Ubuntu/Debian-Abhängigkeiten

Installiere Chrome und seine Abhängigkeiten:

# Paketliste aktualisieren
sudo apt-get update

# Chrome-Abhängigkeiten installieren
sudo apt-get install -y \
  libnss3 \
  libatk-bridge2.0-0 \
  libxss1 \
  libgtk-3-0 \
  libgbm-dev

WSL2 Display-Setup

WSL2 benötigt einen Display-Server für Browser-Automatisierung:

# VcXsrv auf Windows installieren (X Server)
# Download von: https://sourceforge.net/projects/vcxsrv/

# In WSL2 Display setzen
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

# Oder WSLg verwenden (Windows 11)
export DISPLAY=:0

Häufige WSL2-Probleme

Problem: Browser startet, zeigt aber leere Seite

Lösung: Stelle sicher, dass DISPLAY korrekt gesetzt ist und die Firewall Verbindungen erlaubt.

# Display-Verbindung testen
xclock

# Falls xclock nicht erscheint, DISPLAY korrigieren
export DISPLAY=$(ip route | grep default | awk '{print $3}'):0

Problem: Permission-denied-Fehler

Lösung: Überprüfe Dateiberechtigungen und führe mit dem entsprechenden Benutzer aus.

# Chrome-Sandbox-Berechtigungen korrigieren
sudo chown root:root /path/to/chrome-sandbox
sudo chmod 4755 /path/to/chrome-sandbox

# Oder Sandbox deaktivieren (weniger sicher)
browser open https://example.com --no-sandbox

Problem: Chrome stürzt sofort ab

Lösung: Fehlende Abhängigkeiten installieren oder Docker verwenden.

# Browser in Docker ausführen
# Playwrights Docker-Image verwenden
docker run -it --rm \
  -v $(pwd):/workspace \
  -e DISPLAY \
  mcr.microsoft.com/playwright:v1.40.0 \
  npx playwright open https://example.com

Best Practices

Selektoren weise verwenden

Bevorzuge stabile Selektoren gegenüber dynamischen:

• Gut: ARIA-Rollen, data-testid-Attribute, semantisches HTML
• Vermeiden: Auto-generierte Klassennamen, XPath mit Indizes, fragile CSS-Selektoren

Fehler elegant behandeln

Websites ändern sich. Baue resiliente Automatisierungen:

// Prüfen, ob Element existiert, bevor geklickt wird
if browser has "Cookies akzeptieren" then
  browser click "Cookies akzeptieren"
end

// Mehrere Selektoren versuchen
browser click "Absenden" or "Speichern" or "Weiter"

Rate Limits respektieren

Überwältige Websites nicht mit Anfragen:

• Füge Verzögerungen zwischen Aktionen ein
• Cache Sitzungsdaten wenn möglich
• Verwende APIs statt Scraping wenn verfügbar
• Folge robots.txt-Richtlinien

Sichere Credential-Handhabung

Hardcode niemals Credentials in Automatisierungen:

// Umgebungsvariablen verwenden
browser type "Passwort" with env.LOGIN_PASSWORD

// Oder Benutzer fragen
ask "Gib dein Passwort ein:" → passwort
browser type "Passwort" with passwort

Integration mit anderen Tools

Kombination mit Sub-Agenten

Lagere Browser-Aufgaben an Sub-Agenten aus für parallele Ausführung:

// Haupt-Agent delegiert Browser-Aufgabe
spawn subagent "Konkurrenzpreise prüfen" with task:
  - Öffne konkurrenz-website.com
  - Suche nach "Produktname"
  - Extrahiere Preis aus Ergebnissen
  - Gib Preisdaten zurück

Browser + MCP-Server

Kombiniere Browser-Automatisierung mit MCP für leistungsstarke Workflows:

// MCP verwenden, um Datenbank abzufragen
mcp query "SELECT * FROM products WHERE stock < 10"

// Browser verwenden, um Lieferanten-Website zu prüfen
for each product in low-stock:
  browser open lieferant.com/suche
  browser type "Suche" with product.name
  browser click "Suchen"
  extract price and availability

Zusammenfassung

Browser-Automatisierung erweitert OpenClaw über APIs und Dateien hinaus ins gesamte Web. Beherrsche die Grundlagen von Navigation, Klicken und Formular-Ausfüllung. Handle Authentifizierung mit Sitzungs-Persistenz. Richte alles korrekt auf Linux und WSL2 ein. Folge Best Practices für resiliente, respektvolle Automatisierung.

Kombiniere Browser-Automatisierung mit Sub-Agenten für parallele Verarbeitung, MCP-Servern für Datenintegration und Speicherdateien für persistente Konfiguration, um ausgeklügelte Web-Workflows zu bauen.