ce-test-browser
everyinc/compound-engineering-plugin
Führe Browsertests für die Seiten durch, die vom aktuellen Branch oder PR betroffen sind.
...Alle erweiternÜber ce-test-browser
Ein Workflow zur Durchführung von End-to-End-Browsertests auf den Seiten, die von einem Pull-Request oder Änderungen an einem Branch betroffen sind, wobei ausschließlich die agent-browser-CLI verwendet wird. Es verzichtet bewusst auf alternative Browser-Automatisierungssysteme oder die Integration von Browser-MCP; in Claude Code werden keine Chrome-MCP-Tools verwendet, und in Codex werden keine anderen Browser-Tools eingesetzt. agent-browser wird zum Öffnen von Seiten, zum Anklicken von Elementen, zum Ausfüllen von Formularen, zum Erstellen von Screenshots und zum Auslesen gerenderter Inhalte verwendet. Es akzeptiert ein Argument, das eine PR-Nummer, einen Zweignamen, das Wort „current“ oder das Flag „--port“ sein kann.
Der Workflow überprüft zunächst, ob „agent-browser“ installiert ist, und bricht mit der Anweisung ab, „/ce-setup“ auszuführen, falls das Programm fehlt. Anschließend fragt er ab, ob der Workflow mit oder ohne Benutzeroberfläche (headless) ausgeführt werden soll – außer im Pipeline-Modus, in dem standardmäßig der headless-Modus verwendet wird, ohne den Ablauf zu blockieren. Der Testumfang wird anhand geänderter Dateien ermittelt, und zwar mithilfe von `gh pr view` für eine PR-Nummer oder mit `git diff` gegenüber dem Hauptzweig für „current“ oder einen Zweig. Geänderte Dateien werden über eine Mustertabelle, die Rails-Views, Controller, Stimulus-Controller, ViewComponents, Layouts, Stylesheets, Helper sowie Next.js-App- und Komponentenpfade abdeckt, auf testbare Routen abgebildet, wodurch eine Liste der zu testenden URLs erstellt wird.
Die Port-Verwaltung unterscheidet zwischen manuellem und Pipeline-Modus. Sie ermittelt einen bevorzugten Port anhand eines expliziten `--port`-Arguments, kontextbezogener Projektanweisungen, `package.json`-Skripten unter „dev/start“, Umgebungsdateien oder des Standardwerts 3000, wobei bewusst kein Text nach einem Port durchsucht wird. Im Pipeline-Modus sucht es nach oben hin nach einem freien Port, da mehrere Agenten parallel laufen können, und startet im Hintergrund einen Entwicklungsserver, falls keiner auf einer Portnummer lauscht, wobei es bis zu 30 Sekunden wartet; im manuellen Modus verwendet es direkt den bevorzugten Port und fordert den Benutzer auf, den Server zu starten, falls dieser nicht läuft. Für jede betroffene Route navigiert es zur Seite und erstellt einen interaktiven Schnappschuss – unter Verwendung des Flags „--headed“, wenn der Benutzer die Option „Watch“ gewählt hat – und überprüft anschließend wichtige Elemente wie Seitentitel oder Überschriften sowie primäre interaktive Elemente. Verwenden Sie es, um zu überprüfen, ob von einer Änderung betroffene Seiten weiterhin korrekt gerendert werden und sich korrekt verhalten.
FAQ
Welches Browser-Automatisierungstool verwendet dieser Skill?
Ausschließlich die Agent-Browser-CLI. Es werden weder Chrome-MCP-Tools in Claude Code noch andere Browser-Tools in Codex verwendet.
Was passiert, wenn „agent-browser“ nicht installiert ist?
Der Benutzer wird aufgefordert, den Befehl /ce-setup für die aktuelle Installation auszuführen, agent-browser zu installieren und es erneut zu versuchen; anschließend wird der Vorgang abgebrochen, da die Funktion ohne agent-browser nicht ausgeführt werden kann.
Wie wird entschieden, welche Seiten getestet werden?
Es ruft geänderte Dateien aus der „gh pr“-Ansicht (bei einem PR) oder per „git diff“ gegenüber dem Hauptzweig (bei einem Zweig oder dem aktuellen Stand) ab und ordnet diese Dateien mithilfe einer Dateimustertabelle den Routen zu, um eine Liste von URLs zu erstellen.
Wie wird der Port des Entwicklungsservers ausgewählt?
Nach Priorität: ein explizites „--port“-Argument, kontextbezogene Projektanweisungen, „package.json“-Dev-Skripte, Umgebungsdateien wie „.env“, dann standardmäßig 3000. Es durchsucht den Text nicht nach einem Port.
Was ist im Pipeline-Modus anders?
Er überspringt die Frage nach „headed“ oder „headless“ und verwendet standardmäßig „headless“, sucht nach oben hin nach einem wirklich freien Port, da Agenten parallel laufen können, und startet automatisch einen Entwicklungsserver im Hintergrund, falls keiner auf Empfang ist.
Alle Dateien
0 Dateience-test-browser installieren
Laden Sie die Skill-Dateien herunter und entpacken Sie sie in Ihr Verzeichnis „.claude/skills/“.
ZIP herunterladenKlonen Sie das Repository und kopieren Sie die Skill-Dateien in Ihr Projekt.
git clone # Copy SKILL.md to your .claude/skills/ directory
Kopieren





Heim
