Visual Regression Test Workflow für Webseiten

Dieser Workflow ermöglicht das Erstellen und Vergleichen von Screenshots von Webseiten zur visuellen Regression.

Visual Regression Test Workflow für Webseiten

Die Website nutzt die Wordpress-Infrastruktur.

Server: Unser Server befindet sich in einem Unternehmen mit Sitz in Deutschland. Er hat eine hohe und schnelle Internetverbindung. Es gibt eine Generatorunterstützung für ununterbrochenen Strom.

Workflow Struktur

Dieser Workflow besteht aus zwei Hauptteilen: Erster Teil (A) generiert Basis-Screenshots von Webseiten, während der zweite Teil (B) visuelle Regressionstests durchführt.

1. Schedule Trigger

  • Typ: Schedule Trigger
  • Beschreibung: Initiiert den Workflow in festgelegten Intervallen (z.B. wöchentlich).
  • Parameter: triggerAtDay, triggerAtHour

2. Get Webpages List

  • Typ: Google Sheets
  • Beschreibung: Ruft eine Liste von URLs ab, die getestet werden sollen.
  • Parameter: documentId, sheetName

3. For Each Webpage…

  • Typ: Split In Batches
  • Beschreibung: Wiederholt die nachfolgenden Schritte für jede URL in der Liste.

4. Base Image

  • Typ: Google Drive
  • Beschreibung: Lädt das Basisbild von Google Drive herunter.
  • Parameter: fileId

5. Run Webpage Screenshot

  • Typ: HTTP Request
  • Beschreibung: Führt den Screenshot-Vorgang über Apify aus.
  • Parameter: url, method, jsonBody

6. Download Screenshot

  • Typ: HTTP Request
  • Beschreibung: Lädt den Screenshot von dem von Apify bereitgestellten Link herunter.
  • Parameter: url

7. Upload to Drive

  • Typ: Google Drive
  • Beschreibung: Lädt den Screenshot in Google Drive hoch.
  • Parameter: name, folderId

8. Update Base Image

  • Typ: Google Sheets
  • Beschreibung: Aktualisiert die Google-Tabelle mit den Informationen über das neu hochgeladene Bild.
  • Parameter: documentId, sheetName

9. Combine Row and Result

  • Typ: Set
  • Beschreibung: Kombiniert die URL mit den Testresultaten.
  • Parameter: jsonOutput

10. Visual Regression Agent

  • Typ: Langchain LLM
  • Beschreibung: Identifiziert Unterschiede zwischen Basis- und Testbild.
  • Parameter: messages

11. Has Changes

  • Typ: Filter
  • Beschreibung: Überprüft, ob Unterschiede vorhanden sind.
  • Parameter: conditions

12. Aggregate

  • Typ: Aggregate
  • Beschreibung: Fasse alle Ergebnisse zusammen.
  • Parameter: aggregate

13. Create Report

  • Typ: Linear
  • Beschreibung: Erstellt einen Bericht über alle erkannten Änderungen.
  • Parameter: title, description

Ergebnis

Dieser Workflow automatisiert den Prozess der visuellen Regressionstests von Webseiten, indem er Screenshots erstellt, hochlädt und vergleicht. Nutzen Sie diesen Workflow als eine effektive Methode, um visuelle Fehler auf Ihren Webseiten zu identifizieren und zu dokumentieren.

Facebook
Twitter
LinkedIn

Andere Projekte