Communitygithub.com

Browser-Automatisierung mit agent-browser

Ein Werkzeug zur Browser-Automation über die Kommandozeile, das direktes Navigieren, Interagieren und Auslesen von Webseiten ermöglicht.

Was ist Browser-Automatisierung mit agent-browser?

Dieses Skill bietet eine umfassende Browser-Automatisierung über das CLI-Tool `agent-browser`. Es ermöglicht das Navigieren, Interagieren (Klicken, Ausfüllen, Auswählen), Screenshots, Netzwerkanalyse und vieles mehr. Der Workflow folgt einem klaren Muster: Navigieren, Snapshot (um Element-Referenzen zu erhalten), Interagieren und erneuter Snapshot. Besonders hervorzuheben sind die vielseitigen Authentifizierungsoptionen: Import von Sitzungen aus dem Benutzer-Browser, persistente Profile, Sitzungsnamen mit automatischer Speicherung, ein verschlüsselter Auth-Vault und State-Dateien. Das Tool läuft plattformunabhängig (npm, brew, cargo) und nutzt Chrome/Chromium über das CDP-Protokoll. Es eignet sich ideal für Entwickler und KI-Agenten, die repetitive Web-Aufgaben automatisieren möchten, ohne einen vollwertigen Browser-Treiber wie Selenium oder Playwright einzusetzen. Die unterstützten Plattformen sind alle gängigen Betriebssysteme mit Chrome/Chromium. Die Dokumentation ist umfassend und deckt auch fortgeschrittene Szenarien wie iframes, parallele Sessions, Downloads und Device-Emulation ab.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add lunrenyi/ai-agent.sh
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Browser-Automatisierung mit agent-browser?

Das CLI verwendet Chrome/Chromium direkt über CDP. Installiere es mit npm i -g agent-browser, brew install agent-browser oder cargo install agent-browser. Führe agent-browser install aus, um Chrome herunterzuladen. Führe agent-browser upgrade aus, um auf die neueste Version zu aktualisieren.

Kern-Workflow

Jede Browser-Automatisierung folgt diesem Muster:

  1. Navigieren: agent-browser open <url>
  2. Snapshot: agent-browser snapshot -i (erhalte Element-Referenzen wie @e1, @e2)
  3. Interagieren: Verwende Referenzen zum Klicken, Ausfüllen, Auswählen
  4. Erneuter Snapshot: Nach Navigation oder DOM-Änderungen erhältst du frische Referenzen
agent-browser open https://example.com/form
agent-browser snapshot -i
# Ausgabe: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

agent-browser fill @e1 "[email protected]"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Ergebnis prüfen

Befehlsverkettung

Befehle können mit && in einem einzigen Shell-Aufruf verkettet werden. Der Browser bleibt zwischen den Befehlen über einen Hintergrund-Daemon bestehen, daher ist die Verkettung sicher und effizienter als separate Aufrufe.

# Kette: Öffnen + Warten + Snapshot in einem Aufruf
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

# Kette: Mehrere Interaktionen
agent-browser fill @e1 "[email protected]" && agent-browser fill @e2 "password123" && agent-browser click @e3

# Navigieren und erfassen
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

Wann verkettet werden sollte: Verwende &&, wenn du die Ausgabe eines Zwischenbefehls nicht auslesen musst, bevor du fortfährst (z. B. öffnen + warten + Screenshot). Führe Befehle separat aus, wenn du zuerst die Ausgabe parsen musst (z. B. Snapshot, um Referenzen zu entdecken, dann mit diesen Referenzen interagieren).

Authentifizierung verwalten

Wenn du eine Website automatisierst, die eine Anmeldung erfordert, wähle den passenden Ansatz:

Option 1: Auth aus dem Browser des Benutzers importieren (am schnellsten für einmalige Aufgaben)

# Verbinde mit dem laufenden Chrome des Benutzers (dieser ist bereits angemeldet)
agent-browser --auto-connect state save ./auth.json
# Verwende diesen Auth-Zustand
agent-browser --state ./auth.json open https://app.example.com/dashboard

State-Dateien enthalten Sitzungstokens im Klartext – füge sie zu .gitignore hinzu und lösche sie, wenn sie nicht mehr benötigt werden. Setze AGENT_BROWSER_ENCRYPTION_KEY für die Verschlüsselung im Ruhezustand.

Option 2: Persistentes Profil (am einfachsten für wiederkehrende Aufgaben)

# Erster Durchlauf: Manuelle oder automatisierte Anmeldung
agent-browser --profile ~/.myapp open https://app.example.com/login
# ... Anmeldedaten ausfüllen, absenden ...

# Alle zukünftigen Durchläufe: Bereits authentifiziert
agent-browser --profile ~/.myapp open https://app.example.com/dashboard

Option 3: Sitzungsname (automatisches Speichern/Wiederherstellen von Cookies + localStorage)

agent-browser --session-name myapp open https://app.example.com/login
# ... Anmeldevorgang ...
agent-browser close  # Zustand automatisch gespeichert

# Nächstes Mal: Zustand automatisch wiederhergestellt
agent-browser --session-name myapp open https://app.example.com/dashboard

Option 4: Auth-Vault (Anmeldedaten verschlüsselt gespeichert, Anmeldung nach Namen)

echo "$PASSWORD" | agent-browser auth save myapp --url https://app.example.com/login --username user --password-stdin
agent-browser auth login myapp

auth login navigiert mit load und wartet dann auf das Erscheinen der Anmeldeformular-Selektoren, bevor es ausfüllt/klickt – zuverlässiger bei verzögerten SPA-Anmeldebildschirmen.

Option 5: State-Datei (manuelles Speichern/Laden)

# Nach der Anmeldung:
agent-browser state save ./auth.json
# In einer zukünftigen Sitzung:
agent-browser state load ./auth.json
agent-browser open https://app.example.com/dashboard

Siehe references/authentication.md für OAuth, 2FA, cookie-basierte Authentifizierung und Token-Erneuerungsmuster.

Wichtige Befehle

# Navigation
agent-browser open <url>              # Navigieren (Aliase: goto, navigate)
agent-browser close                   # Browser schließen
agent-browser close --all             # Alle aktiven Sitzungen schließen

# Snapshot
agent-browser snapshot -i             # Interaktive Elemente mit Referenzen (empfohlen)
agent-browser snapshot -s "#selector" # Auf CSS-Selektor eingrenzen

# Interaktion (verwende @refs aus dem Snapshot)
agent-browser click @e1               # Element anklicken
agent-browser click @e1 --new-tab     # Klicken und in neuem Tab öffnen
agent-browser fill @e2 "text"         # Löschen und Text eingeben
agent-browser type @e2 "text"         # Eingeben ohne Löschen
agent-browser select @e1 "option"     # Dropdown-Option auswählen
agent-browser check @e1               # Checkbox aktivieren
agent-browser press Enter             # Taste drücken
agent-browser keyboard type "text"    # Am aktuellen Fokus eingeben (ohne Selektor)
agent-browser keyboard inserttext "text"  # Ohne Tastenereignisse einfügen
agent-browser scroll down 500         # Seite scrollen
agent-browser scroll down 500 --selector "div.content"  # In einem bestimmten Container scrollen

# Informationen abrufen
agent-browser get text @e1            # Elementtext abrufen
agent-browser get url                 # Aktuelle URL abrufen
agent-browser get title               # Seitentitel abrufen
agent-browser get cdp-url             # CDP-WebSocket-URL abrufen

# Warten
agent-browser wait @e1                # Auf Element warten
agent-browser wait --load networkidle # Auf Netzwerkinaktivität warten
agent-browser wait --url "**/page"    # Auf URL-Muster warten
agent-browser wait 2000               # Millisekunden warten
agent-browser wait --text "Welcome"    # Auf Erscheinen eines Textes warten (Teilzeichenfolge)
agent-browser wait --fn "!document.body.innerText.includes('Loading...')"  # Auf Verschwinden eines Textes warten
agent-browser wait "#spinner" --state hidden  # Auf Verschwinden eines Elements warten

# Downloads
agent-browser download @e1 ./file.pdf          # Element anklicken, um Download auszulösen
agent-browser wait --download ./output.zip     # Auf Abschluss eines Downloads warten
agent-browser --download-path ./downloads open <url>  # Standard-Downloadverzeichnis festlegen

# Netzwerk
agent-browser network requests                 # Getrackte Anfragen inspizieren
agent-browser network requests --type xhr,fetch  # Nach Ressourcentyp filtern
agent-browser network requests --method POST   # Nach HTTP-Methode filtern
agent-browser network requests --status 2xx    # Nach Status filtern (200, 2xx, 400-499)
agent-browser network request <requestId>      # Vollständige Anfrage-/Antwortdetails anzeigen
agent-browser network route "**/api/*" --abort  # Passende Anfragen blockieren
agent-browser network har start                # HAR-Aufzeichnung starten
agent-browser network har stop ./capture.har   # HAR-Aufzeichnung beenden und speichern

# Viewport & Geräteemulation
agent-browser set viewport 1920 1080          # Viewport-Größe festlegen (Standard: 1280x720)
agent-browser set viewport 1920 1080 2        # 2x Retina (gleiche CSS-Größe, höher aufgelöste Screenshots)
agent-browser set device "iPhone 14"          # Gerät emulieren (Viewport + User-Agent)

# Aufnahme
agent-browser screenshot              # Screenshot in temporäres Verzeichnis
agent-browser screenshot --full       # Vollständiger Seiten-Screenshot
agent-browser screenshot --annotate   # Annotierter Screenshot mit nummerierten Element-Labels
agent-browser screenshot --screenshot-dir ./shots  # In benutzerdefiniertes Verzeichnis speichern
agent-browser screenshot --screenshot-format jpeg --screenshot-quality 80
agent-browser pdf output.pdf          # Als PDF speichern

# Live-Vorschau / Streaming
agent-browser stream enable           # Starte Runtime-WebSocket-Streaming auf einem automatisch ausgewählten Port
agent-browser stream enable --port 9223  # Binde einen bestimmten localhost-Port
agent-browser stream status           # Zeige aktivierten Status, Port, Verbindung und Screencasting an
agent-browser stream disable          # Beende Runtime-Streaming und entferne die .stream-Metadatendatei

# Zwischenablage
agent-browser clipboard read                      # Text aus der Zwischenablage lesen
agent-browser clipboard write "Hello, World!"     # Text in die Zwischenablage schreiben
agent-browser clipboard copy                      # Aktuelle Auswahl kopieren
agent-browser clipboard paste                     # Aus Zwischenablage einfügen

# Dialoge (alert, confirm, prompt, beforeunload)
# Standardmäßig werden alert- und beforeunload-Dialoge automatisch akzeptiert, sodass sie den Agenten niemals blockieren.
# confirm- und prompt-Dialoge erfordern weiterhin eine explizite Behandlung.
# Verwende --no-auto-dialog, um die automatische Behandlung zu deaktivieren.
agent-browser dialog accept              # Dialog akzeptieren
agent-browser dialog accept "my input"   # Prompt-Dialog mit Text akzeptieren
agent-browser dialog dismiss             # Dialog ablehnen/abbrechen
agent-browser dialog status              # Prüfen, ob ein Dialog derzeit geöffnet ist

# Diff (Seitenzustände vergleichen)
agent-browser diff snapshot                          # Aktuellen Snapshot mit letztem Snapshot vergleichen
agent-browser diff snapshot --baseline before.txt    # Aktuellen Snapshot mit gespeicherter Datei vergleichen
agent-browser diff screenshot --baseline before.png  # Visuellen Pixel-Diff durchführen
agent-browser diff url <url1> <url2>                 # Zwei Seiten vergleichen
agent-browser diff url <url1> <url2> --wait-until networkidle  # Benutzerdefinierte Wartestrategie
agent-browser diff url <url1> <url2> --selector "#main"  # Auf Element eingrenzen

Streaming

Jede Sitzung startet automatisch einen WebSocket-Stream-Server auf einem vom Betriebssystem zugewiesenen Port. Verwende agent-browser stream status, um den gebundenen Port und den Verbindungsstatus zu sehen. Verwende stream disable, um ihn zu beenden, und stream enable --port <port>, um ihn auf einem bestimmten Port wieder zu aktivieren.

Batch-Ausführung

Führe mehrere Befehle in einem einzigen Aufruf aus, indem du ein JSON-Array von String-Arrays an batch pipe-st. Dies vermeidet den Prozessstart-Overhead pro Befehl bei mehrstufigen Workflows.

echo '[
  ["open", "https://example.com"],
  ["snapshot", "-i"],
  ["click", "@e1"],
  ["screenshot", "result.png"]
]' | agent-browser batch --json

# Beim ersten Fehler anhalten
agent-browser batch --bail < commands.json

Verwende batch, wenn du eine bekannte Befehlssequenz hast, die nicht von Zwischenergebnissen abhängt. Verwende separate Befehle oder &&-Verkettung, wenn du die Ausgabe zwischen Schritten parsen musst (z. B. Snapshot, um Referenzen zu entdecken, dann interagieren).

Häufige Muster

Formularabsenden

agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "[email protected]"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle

Authentifizierung mit Auth-Vault (Empfohlen)

# Anmeldedaten einmal speichern (verschlüsselt mit AGENT_BROWSER_ENCRYPTION_KEY)
# Empfohlen: Passwort über stdin weiterleiten, um Verlauf der Shell zu vermeiden
echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin

# Mit gespeichertem Profil anmelden (LLM sieht das Passwort nie)
agent-browser auth login github

# Profile auflisten/anzeigen/löschen
agent-browser auth list
agent-browser auth show github
agent-browser auth delete github

auth login wartet auf das Erscheinen der Benutzername-/Passwort-/Absende-Selektoren, bevor es interagiert, mit einem Timeout, das an den standardmäßigen Aktions-Timeout gebunden ist.

Authentifizierung mit Zustandspersistenz

# Einmal anmelden und Zustand speichern
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "$USERNAME"
agent-browser fill @e2 "$PASSWORD"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json

# In zukünftigen Sitzungen wiederverwenden
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

Sitzungspersistenz

# Cookies und localStorage über Browser-Neustarts hinweg automatisch speichern/wiederherstellen
agent-browser --session-name myapp open https://app.example.com/login
# ... Anmeldevorgang ...
agent-browser close  # Zustand automatisch gespeichert in ~/.agent-browser/sessions/

# Nächstes Mal: Zustand automatisch geladen
agent-browser --session-name myapp open https://app.example.com/dashboard

# Zustand im Ruhezustand verschlüsseln
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
agent-browser --session-name secure open https://app.example.com

# Gespeicherte Zustände verwalten
agent-browser state list
agent-browser state show myapp-default.json
agent-browser state clear myapp
agent-browser state clean --older-than 7

Arbeiten mit Iframes

Iframe-Inhalte werden automatisch in Snapshots eingebettet. Referenzen in Iframes tragen den Frame-Kontext, sodass du direkt mit ihnen interagieren kannst.

agent-browser open https://example.com/checkout
agent-browser snapshot -i
# @e1 [heading] "Checkout"
# @e2 [Iframe] "payment-frame"
#   @e3 [input] "Card number"
#   @e4 [input] "Expiry"
#   @e5 [button] "Pay"

# Direkt interagieren – kein Frame-Wechsel nötig
agent-browser fill @e3 "4111111111111111"
agent-browser fill @e4 "12/28"
agent-browser click @e5

# Um einen Snapshot auf ein Iframe zu beschränken:
agent-browser frame @e2
agent-browser snapshot -i         # Nur Iframe-Inhalt
agent-browser frame main          # Zum Haupt-Frame zurückkehren

Datenextraktion

agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Text eines bestimmten Elements abrufen
agent-browser get text body > page.txt  # Gesamten Seitentext abrufen

# JSON-Ausgabe zum Parsen
agent-browser snapshot -i --json
agent-browser get text @e1 --json

Parallele Sitzungen

agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list

Mit vorhandenem Chrome verbinden

# Laufenden Chrome mit aktiviertem Remote-Debugging automatisch erkennen
agent-browser --auto-connect open https://example.com
agent-browser --auto-connect snapshot

# Oder mit explizitem CDP-Port
agent-browser --cdp 9222 snapshot

Auto-Connect erkennt Chrome über DevToolsActivePort, gängige Debugging-Ports (9222, 9229) und fällt auf eine direkte WebSocket-Verbindung zurück, wenn die HTTP-basierte CDP-Erkennung fehlschlägt.

Farbschema

…

[aus Platzgründen gekürzt]

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community