Automatisieren Sie visuelle Regressionstests mit KI zur Vermeidung von UI-Fehlern

KI-gestützte visuelle Regressionstests

Das manuelle Überprüfen von Websites auf unerwartete visuelle Änderungen ist mühsam und fehleranfällig. Dieser n8n-Workflow nutzt die Kraft von KI-Vision-Modellen, um visuelle Regressionstests zu automatisieren und sicherzustellen, dass das UI und die UX Ihrer Website bei allen Bereitstellungen konsistent und fehlerfrei bleiben.

Hauptmerkmale

• KI-gesteuerter visueller Vergleich: Nutzt die fortschrittlichen Vision-Fähigkeiten von Google Gemini, um subtile UI-, Text-, Bild-, Farb- und Layout-Regressionen zwischen aktuellen und Basis-Screenshots präzise zu erkennen.
• Automatisierte Screenshot-Erstellung: Erfasst nahtlos aktuelle Webseiten-Screenshots mithilfe von Apify, einem zuverlässigen Web-Scraping-Drittanbieterdienst.
• Zentralisierte URL-Verwaltung: Verwalten Sie mühelos Ihre Liste überwachten Webseiten und deren zugehörige Basisbildreferenzen innerhalb eines Google Sheets.
• Proaktive Problemberichterstattung: Erstellt automatisch detaillierte Berichte und Probleme in Linear.app (oder Ihrem bevorzugten Projektmanagement-Tool), wenn visuelle Änderungen erkannt werden.
• Geplante Automatisierung: Konfigurieren Sie den Workflow so, dass visuelle Regressionstests nach einem Zeitplan ausgeführt werden, wodurch eine kontinuierliche Überwachung ohne manuelle Eingriffe gewährleistet wird.

Funktionsweise

Dieser Workflow ist geschickt in zwei Kernteile aufgeteilt. Teil A widmet sich dem Aufbau Ihrer Basislinie durch das Erzeugen und Speichern initialer "goldener" Screenshots Ihrer Webseiten. Teil B übernimmt anschließend, führt automatisierte Tests gegen diese Baselines aus, vergleicht neue Screenshots mit dem KI-Vision-Modell und meldet etwaige Abweichungen.

Teil A: Basisbilder generieren

Bevor visuelle Regressionstests durchgeführt werden, benötigen wir eine Reihe von Basis-Screenshots zum Vergleich. Dieser erste Teil des Workflows nutzt einen externen Screenshot-Service, Apify.com, um dies zu erreichen. Normalerweise führen Sie diesen Abschnitt nur aus, wenn Sie Ihre Basisbilder aktualisieren müssen.

1. Liste der Webseiten zum Generieren der Basisbilder abrufen

Der Workflow beginnt mit dem Abrufen einer Liste von Webseiten aus einem bestimmten Google Sheet. Dieses Sheet dient als zentrales Verzeichnis und enthält alle URLs, die Sie überwachen möchten, sowie deren zugehörige Basis-Screenshot-Referenzen.

2. Webseiten-Screenshot über Apify erstellen

Für jede Webseite in Ihrer Liste interagiert der Workflow mit Apify.com, einem leistungsstarken SaaS-Web-Scraping-Dienst, um einen hochwertigen Screenshot zu erzeugen. Apifys speziell dafür vorgesehener Screenshot-Actor sorgt für konsistente und präzise Bilderfassung.

3. Screenshot in Google Drive hochladen

Sobald ein Screenshot von Apify generiert wurde, wird er heruntergeladen und sicher in Ihrem Google Drive abgelegt. Wichtig ist, dass der Workflow anschließend in Ihrem Google Sheet die neue Google Drive-ID für jedes Bild aktualisiert, sodass eine einfache Referenzierung bei zukünftigen Regressionstests möglich ist.

Teil B: Visuellen Regressionstest ausführen

Mit etablierten Basisbildern startet Teil B des Workflows und überwacht aktiv visuelle Regressionen. Dieser Abschnitt ist so konzipiert, dass er automatisch nach einem Zeitplan läuft und fortlaufend auf unerwartete Änderungen prüft.

4. Visuellen Regressionstest auslösen

Der visuelle Regressionstest kann manuell oder effizienter automatisiert über einen wiederkehrenden Zeitplan mit dem "Schedule Trigger" Knoten von n8n ausgelöst werden. Er beginnt mit dem Abrufen der neuesten Liste der zu testenden Webseiten aus Ihrem Google Sheet.

5. Basisbild herunterladen und neuen Webseiten-Screenshot erstellen

Für jede Webseite führt der Workflow zwei gleichzeitige Aktionen aus: Er lädt den bestehenden Basis-Screenshot von Google Drive herunter und erstellt einen aktuellen Screenshot der Webseite mithilfe von Apify.com.

6. Screenshots mit dem Vision-Modell vergleichen

Der Kern des visuellen Regressionstests liegt hier. Sowohl der Basis- als auch der neue Screenshot werden an ein KI-Vision-Modell (in diesem Fall Google Gemini) zum Vergleich gesendet. Ein strukturierter Output-Parser sorgt dafür, dass die Analyse der KI zu visuellen Unterschieden sauber im JSON-Format für die weitere Verarbeitung zurückgegeben wird.

7. Bericht in Linear erstellen

Abschließend werden alle erkannten Änderungen aggregiert, in einen klaren Markdown-Schnipsel formatiert und verwendet, um automatisch ein neues Issue oder einen Bericht in Linear.app zu erstellen. Dies bietet Ihrem Team sofort umsetzbare Einblicke in etwaige UI-Regressionen und ermöglicht eine schnelle Behebung.