Wie P2ER mit Chrome-Entwicklertools für Agents eine Umgebung mit hohem Vertrauen für das agentische Programmieren geschaffen hat

Peer Weidner
Peer Weidner
GitHub LinkedIn
José Luis Zapata

Veröffentlicht am 22. Juni 2026

P2ER, eine Agentur für digitale Lösungen, verwendet Chrome-Entwicklertools für Agenten, um sicherzustellen, dass nur geprüfte, funktionierende Software an Menschen zur endgültigen Überprüfung weitergegeben wird. Durch die Umstellung ihres Workflows auf eine agentische Infrastruktur können KI-Agenten die empirische UI-Überprüfung durchführen. Dadurch konnte die Bereitstellungshäufigkeit von einmal pro Woche auf mehrmals täglich erhöht werden.

Die Herausforderung: Qualität in bestehenden Anwendungen skalieren

P2ER bietet hochwertige digitale Erlebnisse für globale Marken, darunter Autohersteller, Uhrenmarken und Unternehmen aus der Gastronomie. Die größte Herausforderung bestand wie bei vielen Unternehmen in der Arbeit mit komplexen, bestehenden Anwendungen. Als Team, das agentisches Coding einführte, standen sie vor drei großen Hürden:

  • Fehleranfällige UI-Tests : Standardtestsuiten hatten Probleme mit dynamischen Daten wie schwankenden Hotelpreisen oder saisonalen Angeboten in einigen Projekten von P2ER. Mock-Daten verbargen oft Integrationsfehler, die ein menschlicher Tester sofort finden würde.
  • Probleme mit der Zuverlässigkeit von Agenten : Ohne explizite Anweisungen behaupteten KI-Agenten manchmal, dass eine Aufgabe abgeschlossen sei, ohne sie tatsächlich zu überprüfen.
  • Kontextverlust : Umfangreiche Aufgaben und Modell-Time-outs führten dazu, dass Agenten die Sitzungsziele aus den Augen verloren. Dadurch war es für Entwickler schwierig, die von einem Agenten begonnene Arbeit nachzuvollziehen und fortzusetzen.

Die Lösung: Infrastruktur für Handwerkskunst schaffen

P2ER hat eine Infrastruktur entwickelt, in der KI als „Sparringspartner“ behandelt wird, der auch die sich wiederholenden Aspekte der Entwicklung übernehmen kann. Dieser Ansatz ermöglicht es dem Team, die Handwerkskunst zu skalieren, indem es sich auf die Architektur und die kreative Problemlösung konzentriert.

Empirische Überprüfung mit den Entwicklertools für den MCP-Server von Agenten erzwingen

Um die Zuverlässigkeit zu gewährleisten, hat P2ER eine Regel für die obligatorische empirische Überprüfung eingeführt. Dieses technische Mandat, das in der Datei AGENTS.md des Projekts festgelegt ist, besagt:

All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.

Anstatt sich auf die Aussage des Agenten zu verlassen, verwendet das Team Chrome-Entwicklertools für Agenten, um Agenten eine sichere Umgebung zu bieten, in der sie visuell und interaktiv durch die Anwendung navigieren können.

Diese „Testagenten“ führen mehrere wichtige Aufgaben aus, die bei statischen Standardtests nicht berücksichtigt werden:

  • Tests mit dynamischen Daten:Auch in einer Staging-Umgebung testen Agenten mit echten, schwankenden Daten (z. B. sich ändernden Hotelpreisen je nach Saison), um die Anwendung genau so zu erleben, wie ein Nutzer sie erleben würde. Dies wird durch die Interaktionstools der Entwicklertools für Agenten wie new_page, navigate_page, fill, click und hover ermöglicht, die in ihrer github-issue-test-Fähigkeit aufgerufen werden. So kann sich der Agent dynamisch authentifizieren und einen realistischen Nutzerklickpfad simulieren.
  • Visuelle Audits:Agenten erkennen visuelle Abweichungen zwischen Figma-Layouts und der tatsächlichen Implementierung. Mit dem Tool take_screenshot aus den Entwicklertools für Agenten erfasst ihre figma-validate-Fähigkeit hochauflösende Screenshots von Live-Storybook-Renderings, um einen direkten Vergleich mit Figma-Exporten durchzuführen.
  • Tests zur Nutzerfreundlichkeit:Agenten erkennen fehlende Übersetzungen oder Fehler bei der Nutzerfreundlichkeit, die von automatisierten Skripts oft übersehen werden. Durch die direkte Interaktion mit der Barrierefreiheitsstruktur und die Überprüfung visueller Snapshots, die mit take_snapshot und take_screenshot abgerufen wurden, suchen Agenten aktiv nach UI-Anomalien wie MISSING_MESSAGE-Strings, wie in ihren automatisierten Überprüfungsworkflows ausdrücklich angewiesen.

Unteraufgaben aufteilen und beibehalten

Um Time-outs von Sitzungen und Kontextverlust zu vermeiden, teilt P2ER die Arbeit streng in Unteragenten auf. Anschließend werden die Agenten angewiesen, als Orchestratoren zu fungieren:

Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.

Um die menschlichen Produktinhaber in diesem Prozess auf dem Laufenden zu halten, hat das Team eine benutzerdefinierte Fähigkeit für Agenten integriert, mit der sie ihre Arbeit in GitHub-Problemen verfolgen können. So wird sichergestellt, dass jede Unteragentenaufgabe und ihre Ergebnisse als Unterproblem mit der GitHub API beibehalten und dokumentiert werden. Dadurch entsteht ein klarer Prüfpfad und ein dauerhafter Kontext, den andere Entwickler aufgreifen können.

Umgebungen für die parallele Ausführung isolieren

Um den Entwicklungsprozess zu skalieren, sodass mehrere Agenten Code parallel ausführen können, schreibt P2ER für seine Agenten isolierte Umgebungen pro Aufgabe vor. So werden Statuskonflikte und Netzwerkprobleme bei der UI-Überprüfung vermieden.

Die technische Einrichtung für diese Isolation umfasst Folgendes:

  • Isolierte Git-Worktrees:Um Dateikollisionen und Workspace-Verschmutzung zu vermeiden, wenn mehrere Agenten parallel arbeiten, werden Aufgaben in isolierten Git-Worktrees ausgeführt. Jeder Agent erhält einen eigenen Dateisystembereich, in dem Umgebungsvariablen kopiert und Abhängigkeiten symbolisch verknüpft werden. So wird sichergestellt, dass Dateiänderungen sich nie gegenseitig überschreiben.
  • Eindeutige Umgebungen:Jeder Agent und jede Aufgabe führt seinen Next.js-Entwicklungsserver auf einem eindeutigen isolierten Port aus. Gemäß den Projektregeln werden Server dynamisch mit npx next dev -p <custom_port> --turbopack gestartet, um eine parallele Ausführung ohne Netzwerkkonflikte zu gewährleisten.
  • Datenbankklone:Um Datenkollisionen bei parallelen Tests zu vermeiden, dupliziert P2ER die Hauptdatenbank beim Start des Agenten programmatisch in ein aufgabenspezifisches Schema. Nachdem der Agent die Überprüfung abgeschlossen und die Aufgabe genehmigt wurde, wird die isolierte Datenbank durch einen automatischen Bereinigungsprozess gelöscht. Dieser Lebenszyklus stellt sicher, dass jeder Agent in einem sauberen Workspace arbeitet und keine verwaisten Daten zurücklässt.
  • Gezielte Tests:Alle Browsertests über Chrome-Entwicklertools für Agenten müssen auf den genauen benutzerdefinierten Port ausgerichtet sein, der dieser bestimmten Agenteninstanz zugewiesen ist. Das Testmandat verbietet das Festcodieren von Standardports und erfordert Test Ziel-URLs wie http://localhost:<custom_port>.

Auswirkungen: 10-fache Steigerung der Entwicklungsgeschwindigkeit bei gleichbleibender Qualität

Die Umstellung auf agentisches Coding mit vertrauenswürdigen Schutzmaßnahmen hat den Output von P2ER verändert. Diese Änderungen waren ursprünglich erforderlich, um die Zuverlässigkeit des Agenten zu gewährleisten, wirkten sich aber auch positiv auf den gesamten Entwicklungszyklus aus:

  • 10-mal schnellere Arbeitszyklen:Die meisten Probleme werden jetzt innerhalb eines Tages behoben, verglichen mit dem bisherigen Durchschnitt von 1 bis 3 Tagen. Die Bereitstellungshäufigkeit stieg von einmal pro Woche auf mehrmals täglich.
  • Strategischer Fokus für QA-Teams: Da Agenten jetzt grundlegende Regressionen und „leicht zu behebende Probleme“ erkennen, kann sich das menschliche Testteam auf komplexere Testszenarien konzentrieren.
  • Robuste Implementierungen für Stakeholder:Implementierungen sind jetzt robuster, da Tests über den Standard-„Happy Path“ des Programmierers hinausgehen.
  • Klare Kommunikation und Nachvollziehbarkeit:Durch die Durchsetzung einer Regel „Menschliches Problem zu Unterproblem der Implementierung“ erhalten Stakeholder klare Anweisungen zu den vorgenommenen logischen Verbesserungen, anstatt sich durch Tickets mit technischen Implementierungsdetails und Anweisungen zum Testen zu arbeiten.

Ein Beispiel für die Auswirkungen auf die Entwicklungsgeschwindigkeit: P2ER hat in sechs Monaten eine neue Plattform entwickelt, für die mit den etablierten Methoden viele Jahre erforderlich gewesen wären. Der Mensch bleibt das letzte Qualitätstor und überprüft Pull Requests, die bereits von Agenten validiert wurden.

Technische Informationen für Teams

Bei der Entwicklung dieses Workflows hat P2ER mehrere Strategien identifiziert, die den Übergang von der Experimentierphase zu einem ausgereiften, agentengestützten Entwicklungsmodell erleichterten.

Diese Strategien können anderen Teams helfen, ihre eigenen agentischen Implementierungen zu optimieren:

Tokennutzung mit Skriptinjektion und CLI-Batching optimieren

MCP-Server können bei langen Entwicklungssitzungen tokenintensiv werden, wenn Agenten sich ausschließlich auf die schrittweise Navigation verlassen (z. B. einen Snapshot erstellen, eine ID suchen, eine Eingabe ausfüllen und warten). Um diesen Aufwand zu minimieren, verfolgt P2ER einen zweigleisigen Ansatz:

  • Inline-Skriptinjektion:Für gezielte Interaktionen, z. B. die Authentifizierung über komplexe React-Formulare, verwenden Agenten das Tool evaluate_script, um Vanilla-JavaScript direkt in den Browser einzufügen. Dadurch werden integrierte Setter-Überschreibungen umgangen und mehrere Aktionen gleichzeitig ausgeführt, was zahlreiche Gesprächsrunden spart.
  • CLI-Skript-Batching:Wenn Agenten auf ein Problem stoßen oder ein extrem langer, sich wiederholender Browserablauf auftritt, wechseln sie zu einem CLI-Batching-Fallback. Anstatt Tokens für wiederholte, einzelne MCP-Tools auszugeben oder benutzerdefinierte Automatisierungsskripts von Grund auf neu zu schreiben, fordert P2ER die Chrome-Entwicklertools-CLI auf, Browseraktionen beizubehalten und zu bündeln. So können Agenten ganze mehrstufige Abläufe programmatisch in einem Schritt ausführen, was den Aufwand der ständigen Kommunikation zwischen Modell und Tool drastisch reduziert.

Leistungsverfolgung mit der Trace-Analyse automatisieren

Anstatt sich ausschließlich auf die menschliche Wahrnehmung zu verlassen, hat P2ER eine review-performance Fähigkeit entwickelt, die die Entwicklertools für Agenten verwendet, um automatisierte Lighthouse-Audits und Leistungstraces auszuführen.

Agenten verwenden die Tools performance_start_trace und performance_analyze_insight, um Core Web Vitals (LCP, INP, CLS) zu erfassen und zu untersuchen und Engpässe im Hauptthread oder Layoutverschiebungen zu identifizieren. Um das Qualitätstor zu vervollständigen, können Agenten ein vollständiges lighthouse_audit ausführen, um speziell Regressionen in den Bereichen Barrierefreiheit (a11y), SEO und allgemeine Best Practices für das Web zu vermeiden. So wird sichergestellt, dass nur hochwertiger Code für einen Pull Request eingereicht wird.

Überprüfung mit Chrome-Entwicklertools für Agenten verbessern

Zusätzlich zu den benutzerdefinierten Fähigkeiten verwendet P2ER die Kernfunktionen des MCP-Servers der Chrome-Entwicklertools für Agenten, um eine funktionale Überprüfung durchzuführen. Dazu gehört die Verwendung des Servers, um verschiedene Geräte zu emulieren und die Reaktionsfähigkeit zu testen. So wird sichergestellt, dass die Benutzeroberfläche auf verschiedenen Bildschirmgrößen und Geräten funktioniert.

Durch die Verwendung des MCP-Servers zur Navigation in der Anwendung können Agenten visuelle Abweichungen zwischen Layouts und der tatsächlichen Implementierung erkennen und Fehler identifizieren, die bei statischen Tests oft übersehen werden.

Ressourcen

Wenn Sie den Anwendungsfall von P2ER noch weiter untersuchen möchten, sehen Sie sich alle erwähnten Fähigkeiten in ihrem zugehörigen GitHub-Repository an.

Wenn Sie selbst loslegen und mehr über die Implementierung ähnlicher Workflows mit den Entwicklertools für Agenten erfahren möchten, sehen Sie sich diese Ressourcen an: