Was macht Agent Browser?

Wenn eine Aufgabe das direkte Bedienen einer Webseite (nicht nur das Lesen von API-Daten) erfordert, verwende diesen Skill. Agent Browser basiert auf dem standardisierten CDP (Chrome DevTools Protocol) und befähigt den Agenten, wie ein Mensch im Browser zu navigieren, Formulare auszufüllen, Buttons zu klicken und komplexe Frontend-Interaktionen (z. B. React/Vue-Seiten, Pop-ups, CAPTCHA-Vorschau) zu bewältigen.

Installation

npx clawhub@latest install agent-browser

Geeignete Szenarien

Webseiten öffnen und mehrstufige Aktionen ausführen: Einloggen in ein Backend-System, Daten zwischen mehreren Tabs vergleichen, komplexe Geschäftsformulare absenden.
Elemente mit natürlicher Sprache finden: Ohne aufwändige CSS-Selektoren – einfach „Klicke auf das Suchfeld oben links“ oder „Finde den Button mit der Aufschrift 'In den Warenkorb'“.
Multimedia-Exporte: Aktuelle Seite als hochauflösenden Screenshot, scrollbaren Lang-Screenshot, PDF-Dokument oder sogar als Video-Mitschnitt speichern.
JavaScript auf der Seite ausführen: Eigenes Skript direkt in der Console injizieren, um schwer zugängliche dynamische Daten zu extrahieren oder bestimmte Benutzeraktionen zu simulieren.
Sitzungszustand speichern: Unterstützt Persistierung von Cookies und LocalStorage (retain-Mechanismus), um sich übergreifend nicht erneut anmelden zu müssen.

Nutzungsempfehlungen

Zielseite und erwartetes Ergebnis vorab klären: Lege ein klares Erfolgskriterium fest.
Schrittweise ausführen: Zerlege komplexe Operationen in überprüfbare Einzelschritte (Navigieren → Lokalisieren → Aktion → Prüfen).
Zugangsdaten schützen: Verwende vorzugsweise ein isoliertes Browser-Profil und aktiviere den Minimalberechtigungsmodus.
Visuell validieren: Erstelle vor und nach kritischen Aktionen einen Screenshot – das dient als Nachweis und hilft dem Agenten bei der Selbstkorrektur.

Auslösebedingungen / When to Use

Fehlende API: Wenn die Zielwebseite keine öffentliche API anbietet und Daten nur über die Frontend-Interaktion zugänglich sind.
Grafische Report-Erfassung: Du musst bestimmte Diagramme aus einem komplexen Dashboard extrahieren und analysieren.
Automatisierte Registrierungs-/Login-Abläufe: Du musst eine Reihe von Benutzerverifizierungen oder Profileinstellungen durchführen.
SEO- und Frontend-Performance-Tests: Lese Seitenfehler oder Performance-Metriken (LCP, FID) über die console aus und führe Diagnosen durch.
Echtzeit-Überwachung dynamischer Inhalte: Z. B. Überwachung eines Live-Aktienkursportals oder der Lagerbestandsänderungen während einer Blitz-Aktion.

Kernfähigkeiten / Core Capabilities

1. Semantische Schnappschüsse und Lokalisierung (Semantic Snapshot)

Schritte:
1. Rufe snapshot auf, um den Accessibility Tree zu erhalten.
2. Verwende ax* (Accessibility-Referenzen) und n* (DOM-Referenzen), um die Seitenhierarchie zu verstehen.
3. Verifiziere die korrekte Positionierung mit dem highlight-Skill.
Best Practice: Scrolle bei komplexen Seiten zuerst ganz nach unten, um sicherzustellen, dass Lazy-Loading-Inhalte vollständig geladen sind.

2. Präzise Aktionssimulation (Action Emulation)

Schritte:
1. Rufe das act-Interface auf, um Aktionen wie click, type, hover, drag auszuführen.
2. Setze clearFirst: true, um sicherzustellen, dass das Eingabefeld leer ist.
3. Aktiviere bei kritischen Schritten slowly: true, um menschliches Klickverhalten zu imitieren und die Erkennung durch Anti-Bot-Systeme zu erschweren.
Best Practice: Klicke auf „Absenden“ und warte anschließend mit dem wait-Tool, bis eine bestimmte URL oder ein Text erscheint, um sicherzustellen, dass die Aktion wirksam war.

3. Sitzungspersistierung (Session Retention)

Schritte:
1. Markiere wichtige Tabs mit retain: true.
2. Markierte Tabs werden nach Ende der Agent-Sitzung nicht automatisch geschlossen, sodass sie später erneut aufgerufen werden können.
Best Practice: Aktiviere retain, wenn der Benutzer manuell per QR-Code einloggen muss, und lass den Agenten danach die Kontrolle übernehmen.

4. Fehlererkennung und -diagnose (Errors & Requests)

Schritte:
1. Lese die errors-Liste in Echtzeit aus, um JavaScript-Abstürze zu identifizieren.
2. Überwache Netzwerkanfragen über requests, fange bestimmte API-Pakete ab und analysiere sie (inkl. XHR/Fetch-Antworten).

Häufige Befehle/Vorlagen / Common Patterns

Vorlage für Webseiten-Datenerfassungs-Workflow (Scraping Workflow)

### Aufgabenbeschreibung
[Beschreibung: Von der X-Website die Preise und Bewertungen der ersten 10 Produkte abrufen]

### Arbeitsschritte (Action Sequence)
1. **Navigate**: Besuche `https://example.com/products`.
2. **Wait**: Warte, bis das Element mit `.product-list` vollständig geladen ist.
3. **Scroll**: Scrolle bis zum Seitenende, um die Seitennummerierung auszulösen.
4. **Snapshot**: Erfasse den Text aller `n`-Referenzen.
5. **Console**: Injiziere Skript `Array.from(document.querySelectorAll('.price')).map(e => e.innerText)`.
6. **Screenshot**: Erstelle einen Screenshot des gesamten Listenbereichs und speichere ihn unter `output/products.png`.

### Erwartetes Ergebnis
- Zusammengefasste JSON-Daten.
- Screenshot als Nachweis.

Beispiel: Schnell öffnen und Tab erhalten

// Beispiel: GitHub öffnen und Sitzung erhalten (nicht automatisch schließen)
const tab = await mcp_call({
  name: 'browser_open',
  arguments: {
    targetUrl: "https://github.com",
    profile: "chrome"
  }
});
await mcp_call({
  name: 'browser_retain',
  arguments: {
    targetId: tab.targetId,
    retain: true
  }
});

Fortgeschrittene Anwendungsfälle / Advanced Use Cases

1. Automatisierte UI-Regressionstests

Der Agent öffnet regelmäßig die Entwicklungsumgebung, erstellt Screenshots der Kernfunktionsseiten und vergleicht diese mit den „Basis-Screenshots“ in der MEMORY.md, um UI-Verschiebungen oder fehlende Styles zu erkennen.

2. Plattformübergreifender Daten-„Schlepper“

Der Agent liest Berichtsdaten aus System A, meldet sich automatisch bei System B an und trägt jeden Datensatz manuell ein – eine Systemintegration ohne API.

Grenzen und Einschränkungen / Boundaries

CAPTCHA-Sperre: Komplexe Bild- oder Puzzle-CAPTCHAs erfordern weiterhin manuelles Eingreifen (kann mit dem question-Skill einen Screenshot an den Benutzer senden).
Ressourcenverbrauch (Resources): Das Starten eines Browsers (insbesondere mehrere Instanzen) ist sehr CPU- und speicherintensiv.
Treiberkompatibilität: In manchen Headless-Umgebungen können GPU-beschleunigte Animationen oder WebGL-Inhalte fehlerhaft dargestellt werden.
Anti-Bot-Erkennung: Bei zu mechanischen Aktionen oder auffälligen IP-Geodaten kann die Zielseite eine Sperre auslösen. Verwende nach Möglichkeit einen Proxy.
Timeout-Risiko: Bei sehr langsamen Netzwerk- oder Serverantworten sollte timeoutMs angemessen gesetzt werden.

Zusammenfassung der Best Practices

Wiederholungsstrategie bei Fehlern: Implementiere 2-3 automatische Wiederholungen für fehlgeschlagene Navigationen oder nicht gefundene Elemente.
Umgebungskonsistenz: Halte die Viewport-Größe möglichst konstant, um zu verhindern, dass responsive Layouts Elementpositionen verschieben.
Aufräumen: Schließe ungültige Tabs nach Ende der Aufgabe, es sei denn, sie wurden mit retain markiert.
Inkognito-Modus: Verwende bei sensiblen Aufgaben den incognito-Modus.
Nachvollziehbare Logs: Protokolliere alle Fehler der browser console – sie sind die erste Spur bei der Fehlersuche.

Agent Browser

Was ist Agent Browser?

In Ihrer bevorzugten KI fragen

Dokumentation