KI-Agent Browser-Tests bedeuten: Ein Coding-Agent öffnet deine Web-App in einem echten Browser, klickt sich durch und liest die Konsole, damit er seine eigene Änderung prüft, statt zu raten. Üblicherweise bekommt ein Agent seinen Browser über Playwright MCP, einen MCP-Server, der Browser-Aktionen in Tools verwandelt. Du kannst ihn selbst zu Claude Code oder Codex hinzufügen oder AgentVera nutzen, das ein isoliertes Chrome für deine Agenten startet und dir jeden Tab live zeigt.
Dieser Leitfaden behandelt, was ein Agent im Browser tun kann, die manuelle Einrichtung, den AgentVera-Browser und einen Ablauf, mit dem du eine Änderung Ende-zu-Ende testest.
Warum der Agent einen Browser bekommen sollte
Ohne Browser kann ein Agent, der deine Oberfläche ändert, nur Code lesen und hoffen. Er merkt nicht, dass der Button hinter dem Header verschwindet, dass das Formular beim Absenden einen Fehler wirft oder dass beim Laden ein Konsolenfehler auftaucht. Am Ende bist du die Augen des Agenten: Seite öffnen, das Problem beschreiben, den Fehler einfügen.
Mit einem Browser schließt sich der Kreis:
- Der Agent ändert den Code.
- Er öffnet die Seite, klickt den Ablauf durch und macht einen Screenshot.
- Er liest die Konsolenmeldungen.
- Er behebt, was er gefunden hat, und prüft erneut.
Du prüfst das Ergebnis weiterhin selbst, aber die offensichtlichen Fehler sind abgefangen, bevor du hinschaust.
Was der Agent mit Playwright MCP tun kann
Playwright MCP stellt den Browser als Tools bereit. Die gängigsten:
| Tool | Was der Agent damit tut |
|---|---|
browser_navigate | Öffnet eine URL, etwa deinen Dev-Server |
browser_snapshot | Liest die Seitenstruktur (den Accessibility-Tree), um Elemente zu finden |
browser_click | Klickt auf einen Button, Link oder ein Feld |
browser_type | Tippt in ein Eingabefeld |
browser_take_screenshot | Hält fest, wie die Seite aussieht |
browser_console_messages | Liest Konsolen-Logs und Fehler |
Der Snapshot ist der Kern. Statt Pixelpositionen zu raten, liest der Agent eine strukturierte Ansicht der Seite und klickt Elemente per Referenz an, was deutlich zuverlässiger ist.
Playwright MCP von Hand einrichten
Für Claude Code fügst du den Server aus deinem Projekt heraus hinzu:
claude mcp add playwright npx @playwright/mcp@latestFür Codex trägst du ihn in ~/.codex/config.toml ein:
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]Starte dann deinen Dev-Server und gib dem Agenten eine konkrete Aufgabe:
Open http://localhost:3000/signup, fill the form with a test email,
submit it, and tell me what happens. Check the console for errors.Das funktioniert, aber du siehst nicht, was der Agent sieht, es sei denn, du verlangst Screenshots, und je nachdem, wie du den Server startest, kann der Browser den Zustand mit dem teilen, den du täglich nutzt. Die Grundlagen zu MCP findest du unter Was ist ein MCP-Server.
Der AgentVera-Browser
AgentVera ist eine Desktop-App für macOS, Windows und Linux, die Coding-Agent-CLIs nebeneinander ausführt. Sie hat einen eigenen Agent-Browser, der auf demselben Playwright MCP aufbaut.
Für einen Agenten aktivieren
Im Agent-Dialog hat das Feld Browser drei Optionen:
| Option | Was sie tut |
|---|---|
| Off | Der Agent nutzt keinen Browser |
| AgentVera browser | Über Playwright MCP; du siehst die Tabs live auf der Browser-Seite der App |
| Claude in Chrome | Nur Claude Code: dein eigenes Chrome mit der Claude-Erweiterung (--chrome) |
Wähle AgentVera browser und starte den Agenten. AgentVera startet ein separates Headless-Chrome mit eigenem Profil und verbindet das Playwright MCP des Agenten damit. Es nutzt ein Chrome, Edge, Brave oder Chromium, das bereits auf deinem Rechner installiert ist. Dein persönliches Chrome-Profil, deine Cookies und Passwörter erreichen diesen Browser nie.
Die Option gibt es für Agenten, die MCP-Server unterstützen: Claude Code, Codex, Gemini CLI, Copilot und die meisten anderen unterstützten CLIs. Remote-Agenten über SSH bekommen sie nicht.
Tabs live verfolgen und übernehmen
Die Browser-Seite der App zeigt die Tabs, die der Agent beim Arbeiten öffnet. Es ist eine normale Browser-Ansicht, keine Aufzeichnung: Du kannst jederzeit klicken und tippen, um zu übernehmen, etwa um dich einzuloggen oder ein Cookie-Banner zu schließen, und dann an den Agenten zurückgeben.
Die Symbolleiste enthält, was du erwartest: Adressleiste, Zurück, Vor und Neu laden, Suche auf der Seite, Zoom, Lesezeichen und Verlauf sowie Screenshot, das in deinen Downloads-Ordner speichert. Das Kontextmenü bietet Inspect für die DevTools, und du kannst den Browser in einem eigenen Fenster öffnen. Die Seite zeigt außerdem den Endpunkt, mit dem sich Agenten verbinden.
Konsolenfehler an einen Agenten zurückschicken
Die Browser-Seite hat für jeden Tab ein Konsolenpanel. Zwei Abkürzungen schließen den Kreis ohne Kopieren und Einfügen:
- Fix errors schickt die neuesten Konsolenfehler mit der Anweisung, sie zu beheben, an einen Agenten.
- Jede Zeile hat Fix und Send to agent, damit du einen einzelnen Fehler auswählen kannst.
Das ist derselbe Send-to-agent-Ablauf wie im Rest der App; siehe Send to agent.
Deinen Dev-Server darin öffnen
Wenn ein Agent einen Dev-Server startet, erscheint der Port im Tab „Ports“ des rechten Panels mit Open in the AgentVera browser und Open in the system browser. Links, die Agenten ausgeben, öffnen sich ebenfalls im In-App-Browser; halte beim Klicken ⌥ gedrückt, um stattdessen deinen System-Browser zu nutzen.
Der AgentVera-Browser gehört zum kostenlosen Tarif.
Ein Ablauf, um eine Änderung Ende-zu-Ende zu testen
So ein Setup funktioniert für Änderungen an der Oberfläche gut:
- Erstelle den Agenten mit aktiviertem AgentVera browser, am besten in einem eigenen Git-Worktree.
- Bitte um Änderung und Prüfung zusammen, zum Beispiel: „Füge dem Anmeldeformular einen Hinweis zur Passwortstärke hinzu. Öffne dann die Anmeldeseite, probiere ein schwaches und ein starkes Passwort aus, mache von beiden einen Screenshot und prüfe die Konsole.“
- Beobachte die Browser-Seite, während er arbeitet. Hängt er an einem Login fest, übernimm, logge dich ein und sag dem Agenten, dass er weitermachen soll.
- Zeigt die Konsole Fehler, drücke Fix errors.
- Läuft der Ablauf, lass den Agenten ihn als Playwright-Testdatei festhalten, damit die Prüfung ab jetzt in der CI läuft.
- Prüfe den Diff und die Screenshots, bevor du mergst.
Schritt 5 ist wichtig. Das Browsen über MCP ist hervorragend, um Probleme zu finden und zu verifizieren, aber es ist keine Test-Suite. Eine reguläre Testdatei sorgt dafür, dass der Ablauf auch nächsten Monat noch funktioniert.
Prompts, die gut funktionieren
- „Öffne die Seite, mache einen Snapshot und liste jeden Button auf, der beim Klicken nichts tut.“
- „Stelle die Breite auf Smartphone-Größe, mache einen Screenshot und behebe alles, was überläuft.“
- „Gehe den Checkout mit der Testkarte durch und nenne dann jeden Konsolenfehler und jede fehlgeschlagene Anfrage, die du gesehen hast.“
Sei konkret bei der URL und bei dem, was Erfolg bedeutet. „Teste die App“ lässt dem Agenten zu viel Spielraum; „Melde dich an und bestätige, dass das Dashboard den Namen des neuen Nutzers zeigt“ gibt ihm ein Ziel, das er prüfen kann.
Was du beachten solltest
- Der Agent kann alles anklicken. Richte ihn auf eine lokale oder eine Staging-Umgebung, nicht auf Produktion mit echten Daten.
- Logins. Der AgentVera-Browser hat ein eigenes Profil, du loggst dich dort also einmal ein. Nutze Testkonten.
- Screenshots kosten Kontext. Fordere sie an, wenn sie helfen, nicht bei jedem Schritt.
- Wähle die passende Browser-Option. Claude in Chrome nutzt dein echtes Chrome samt Sitzungen; der AgentVera-Browser hält sie getrennt.
Wenn du mit einem Agenten eine Website von Grund auf baust, zeigt Website mit KI bauen den ganzen Ablauf, und Wie man vibe codet behandelt die Gewohnheiten, die ihn auf Kurs halten.
Lade AgentVera herunter, um deinen Agenten einen Browser zu geben, den du beobachten kannst, oder lies mehr auf der Seite zum Agent-Browser.