Mit automatisierten UI-Audits sicher releasen
Manuelles Testen ist eine langsame, fehleranfällige und mühsame Arbeit, die den Schwung nimmt. Jedes Mal, wenn ich eine Änderung einspiele, habe ich früher befürchtet, dass kaputte Links oder Console-Fehler auf der Produktionsseite offen herumliegen. Das sind jede Woche Stunden manueller Klickarbeit, nur um ein Qualitätsniveau aufrechtzuerhalten.
Ich begann, den webapp-testing-Skill zu verwenden, um diese Arbeit an Eigent auszulagern. Durch die Kombination von Playwrights Automatisierung mit Eigents agentischem Workflow kann ich jetzt mit nur einem Prompt ein vollständiges Site-Audit durchführen – einschließlich visueller Snapshots und Log-Prüfungen.
So habe ich den Workflow eingerichtet, um die Eigent.ai-Website zu testen.
Das Testskript vorbereiten
Ich beginne damit, die Testlogik in einem Python-Skript zu definieren. Mit Playwrights asynchroner API kann ich beim Navigieren Console-Meldungen und Netzwerkfehler nachverfolgen. Dieses Skript fungiert als Gehirn der Operation und sagt Eigent genau, worauf zu achten ist – von bestimmten Navigationslinks bis hin zu Vollseiten-Screenshots.
Führe mit dem webapp-testing-Skill einen umfassenden Funktionstest und UI-Test der Website https://www.eigent.ai/ durch.
Error-Listener konfigurieren
Einer der wertvollsten Teile dieses Workflows ist das Erkennen stiller Fehler. Ich habe das Skript so konfiguriert, dass es auf Browser-Console-Fehler und fehlgeschlagene Netzwerkanfragen hört. So kann Eigent technische Probleme protokollieren, wie zum Beispiel das fehlende PostHog-Token, das ich gefunden habe – eine Fehlkonfiguration, die bei einer manuellen Prüfung leicht übersehen worden wäre.
Die Website autonom navigieren
Eigent übernimmt die Navigation. Es beginnt auf der Startseite und identifiziert primäre Navigationslinks wie Environments und Enterprise. Durch das Anklicken dieser Bereiche und das Warten, bis das Netzwerk inaktiv ist, stellt es sicher, dass jeder Seitenwechsel reibungslos verläuft und die Inhalte wie erwartet geladen werden.
Visuelle Snapshots erfassen
Screenshots sind der beste Weg, um die UI-Konsistenz über mehrere Seiten hinweg zu überprüfen. Während des Tests nimmt Eigent automatisch Vollseiten-Snapshots der Startseite und interner Bereiche auf. Ich habe mehrere Ansichten erfasst, darunter:
- Startseite: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
- Environments-Seite: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
- Enterprise-Seite: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png
Den automatisierten Bericht generieren
Sobald die Navigation abgeschlossen ist, fasst Eigent alles in einem Markdown-Bericht zusammen. Dazu gehören eine Zusammenfassung der Ergebnisse, eine Liste der Console-Fehler und absolute Pfade zu allen erfassten Screenshots. Wenn all diese Daten an einem Ort vorliegen, wird der Prüfungsprozess sofortiger.
Die Ergebnisse analysieren
Ich überprüfe die Ausgabe, um kritische Blocker zu identifizieren. In diesem Lauf hat das Audit einen PostHog-Initialisierungsfehler entdeckt und ein abgebrochenes Video-Asset bei task_splitting.mp4 markiert. Das sind nicht nur Bugs – es sind Chancen, die User Experience zu verbessern, bevor ein Kunde sie überhaupt sieht.
Qualität skalieren, ohne den Aufwand zu skalieren
Es geht hier nicht nur darum, ein paar Console-Fehler zu finden. Dieser Workflow zeigt, wie Eigent ein technisches Tool wie Playwright in einen autonomen Qualitätspartner verwandelt. Anstatt für jede kleine UI-Änderung komplexe Testsuiten zu schreiben und zu pflegen, kann ich Eigent einfach eine URL geben und bekomme einen vollständigen Bericht zurück.
Die „langweiligen“ Teile der QA zu automatisieren ermöglicht es Entwicklern, sich auf den Aufbau von Features zu konzentrieren, während gleichzeitig sichergestellt wird, dass die bestehende Website absolut stabil bleibt.
Was du als Nächstes ausprobieren kannst
Prüfe https://eigent.ai/pricing auf mobile Responsiveness und erfasse einen Screenshot in 375x812 Auflösung. Prüfe alle Blogbeiträge auf der Website auf defekte Bilder und liste alle 404-Fehler auf. Verifiziere, dass der Button „Book a Demo“ auf der Enterprise-Seite das Terminplanungs-Modal korrekt öffnet.
Jeder dieser Schritte nutzt denselben webapp-testing-Skill – keine zusätzliche Einrichtung erforderlich.
Tipps für bessere Ergebnisse
- Verwende networkidle-Wartezustände. So wird sichergestellt, dass asynchrone Assets und Tracking-Skripte vollständig geladen sind, bevor Eigent einen Screenshot aufnimmt oder Fehler prüft.
- Filtere abgebrochene Requests heraus. Viele Browser brechen Requests bei schneller Navigation oder Lazy Loading ab. Wenn du diese herausfilterst, konzentrierst du dich auf echte 404s und Serverfehler.
- Sei bei Rollen spezifisch. Wenn du Eigent anweist, Buttons anzuklicken, verwende rollenbasierte Selektoren wie link oder button, damit die Tests robuster gegenüber CSS-Änderungen sind.
