Workflow zur visuellen Regressionstest

Einführung

In diesem n8n-Workflow werden visuelle Regressionstests für Webseiten durchgeführt. Der Workflow wird in zwei Hauptteile unterteilt: Der erste Teil erzeugt Basis-Screenshots, die als Referenz für die Prüfungen dienen. Der zweite Teil vergleicht die neuen Screenshots mit den Basisbildern, um Änderungen zu erkennen.

Node-Beschreibungen

1. Base Image

• Typ: Google Drive
• Funktion: Dieser Node lädt das Basisbild von Google Drive herunter.
• Einstellungen:
  • fileId: ={{ $json.base }} (verwaltet die ID des Bildes, das heruntergeladen werden soll)
  • options: { binaryPropertyName: data_1 }
  • operation: download

2. Google Gemini Chat Model

• Typ: Google Gemini
• Funktion: Nutzt das Google Gemini Modell zur Verarbeitung von Bilddaten.
• Einstellungen:
  • modelName: models/gemini-1.5-pro-latest

3. Structured Output Parser

• Typ: Output Parser
• Funktion: Verwaltet die Ausgabe der vorherigen Node, um sie in einem strukturierten JSON-Format zu liefern.
• Einstellungen:
  • schemaType: manual
  • inputSchema: Liste von erwarteten Feldern, die die Struktur der Ausgabe definieren.

4. Sticky Notes

• Typ: Sticky Note
• Funktion: Dokumentation innerhalb des Workflows, die die einzelnen Schritte und deren Bedeutung beschreibt.
• Beispielinhalt: „Teil A : Basisbilder generieren“

5. Loop Over Items

• Typ: Split in Batches
• Funktion: Teilt die Liste der Webseiten, für die Screenshots erstellt werden müssen, in kleinere Chargen auf.

6. Wait

• Typ: Wait
• Funktion: Wartet eine bestimmte Zeit, um den Workflow nicht zu überlasten.
• Einstellungen:
  • amount: 2 (2 Sekunden warten)

7. Download Screenshot

• Typ: HTTP Request
• Funktion: Lädt die Screenshot-URL herunter.
• Einstellungen: url: ={{ $json.screenshotUrl }}

8. Upload to Drive

• Typ: Google Drive
• Funktion: Lädt den heruntergeladenen Screenshot in Google Drive hoch.
• Einstellungen:
  • name: ={{ $('Merge').item.json.url.urlEncode() }} (Name des hochgeladenen Bildes)
  • folderId: ID des Zielordners in Google Drive.

9. Update Base Image

• Typ: Google Sheets
• Funktion: Aktualisiert die Referenz für das Basisbild in Google Sheets.
• Einstellungen:
  • columns: definiert, welche Werte aktualisiert werden.

10. Aggregate

• Typ: Aggregate
• Funktion: Fasst mehrere Ergebnisse zusammen und erstellt eine Übersicht.

Ergebnis

Diese Workflow-Automatisierung ermöglicht eine effiziente Durchführung visueller Regressionstests für Webseiten. Die Verwendung von n8n vereinfacht den Prozess des Abrufens, der Verarbeitung und des Vergleichs von Bildern und bietet eine strukturierte Methodik zur Verwaltung von Testergebnissen und Berichten.

Download Link

Workflow herunterladen