Step Types

Flowguard hat verschiedene Step Types, die unterschiedliche Benutzeraktionen simulieren. Jeder Step Type führt eine bestimmte Aktion auf Ihrer Website aus.

Übersicht

Flowguard unterstützt 11 Step Types in fünf Kategorien:

Kategorie	Step Types	Zweck
Navigation	Navigieren	Zwischen Seiten wechseln
Interaktion	Klicken, Ausfüllen, Auswählen, Checkbox, Radio	Benutzereingabe-Aktionen
Überprüfung	Prüfen	Erwartete Ergebnisse bestätigen
Visuell	Visual Check	Seitenaussehen gegen Referenz-Screenshot vergleichen
Timing	Warten, Scrollen, Hover	Flow-Steuerung und Sichtbarkeit

Navigation

Navigate

Interaction

ClickFillSelectCheckboxRadio

Verification

Assert

Timing

WaitScrollHover

Schnellreferenz

• Die meisten Flows beginnen mit: Navigieren → (Interaktionen) → Prüfen
• Immer enden mit: Einem Prüfen-Step, um zu verifizieren, dass die Aktion funktioniert hat

Häufige Flow-Muster

Login Flow

Navigate

→

Fill

→

Fill

→

Click

→

Assert

Email → Password → Submit → Verify

Form Submit

Navigate

→

Fill

→

Select

→

Click

→

Assert

Fields → Dropdown → Submit → Success

Checkout

Click

→

Navigate

→

Fill

→

Click

→

Assert

Add to Cart → Checkout → Pay → Confirm

1. Navigieren (Seite öffnen)

Öffnet eine bestimmte URL im Browser.

Anwendungsfälle

• Test-Flow starten
• Zu anderen Seiten wechseln
• Navigation testen
• Bestimmten Inhalt laden

Konfiguration

URL (erforderlich)

• Die vollständige URL zum Besuchen
• Muss Protokoll enthalten (http:// oder https://)
• Kann jede Seite auf Ihrer Website sein

Beschreibung (optional)

• Notiz, wohin Sie navigieren

Beispiele

URL: https://ihreseite.de/kontakt
Beschreibung: Kontaktformular-Seite öffnen

2. Klicken

Klickt auf ein Element (Button, Link, etc.).

Anwendungsfälle

• Formulare absenden
• Links folgen
• Modals/Popups öffnen
• UI-Elemente umschalten
• Menüs navigieren

Konfiguration

Selektor (erforderlich)

• CSS-Selektor für das Zielelement
• Verwenden Sie das Picker-Tool oder geben Sie manuell ein

Beschreibung (optional)

• Was Sie klicken und warum

Nach Klick warten (optional)

• Millisekunden zum Warten nach dem Klick

3. Ausfüllen (Text eingeben)

Gibt Text in Eingabefelder, Textbereiche oder contenteditable-Elemente ein.

Anwendungsfälle

• Formularfelder ausfüllen
• Suchanfragen eingeben
• In Texteditoren tippen
• Benutzernamen/Passwörter eingeben

Konfiguration

Selektor (erforderlich)

• CSS-Selektor für das Eingabefeld

Text (erforderlich)

• Der einzugebende Text

Beschreibung (optional)

• Welches Feld Sie ausfüllen

Erst leeren (optional)

• Vorhandenen Text vor dem Tippen löschen

4. Prüfen (Check)

Wichtiger Step Type

Prüfen ist der wichtigste Step Type. Ohne Assertions führen Ihre Flows nur Aktionen aus, ohne zu verifizieren, dass sie funktioniert haben. Fügen Sie immer Prüfen-Steps nach wichtigen Aktionen hinzu.

Überprüft, ob Inhalt oder Zustände den Erwartungen entsprechen.

Anwendungsfälle

• Login-Erfolg verifizieren
• Fehlermeldungen prüfen
• Elementsichtbarkeit bestätigen
• Inhalt validieren
• Weiterleitungen testen

Konfiguration

Selektor (erforderlich für elementbasierte Prüfungen)

• Element zum Prüfen (nicht erforderlich für seitenweite Assertions wie URL oder Titel)

Erwarteter Wert (erforderlich)

• Die Art der durchzuführenden Prüfung (siehe alle Optionen unten)

Wert (für einige Assertion-Typen)

• Der erwartete Text oder Wert zum Prüfen

Beschreibung (optional)

• Was Sie verifizieren

Alle Assertion-Typen

Flowguard hat 16 Assertion-Typen in fünf Kategorien:

Sichtbarkeits-Prüfungen

Typ	Beschreibung	Benötigt Selektor	Benötigt Wert
Ist sichtbar	Prüft ob das Element auf der Seite sichtbar ist	Ja	Nein
Ist versteckt	Prüft ob das Element versteckt oder nicht angezeigt wird	Ja	Nein
Existiert	Prüft ob das Element im DOM existiert	Ja	Nein
Existiert nicht	Prüft ob das Element nicht existiert	Ja	Nein

Textinhalt-Prüfungen

Typ	Beschreibung	Benötigt Selektor	Benötigt Wert
Enthält Text	Prüft ob das Element bestimmten Text enthält	Ja	Ja
Text stimmt überein	Prüft ob der Elementtext exakt übereinstimmt	Ja	Ja

Formularfeld-Prüfungen

Typ	Beschreibung	Benötigt Selektor	Benötigt Wert
Eingabewert stimmt überein	Prüft ob ein Eingabefeldwert exakt übereinstimmt	Ja	Ja
Eingabewert enthält	Prüft ob ein Eingabefeldwert Text enthält	Ja	Ja
Ist ausgewählt	Prüft ob eine Checkbox oder Radio ausgewählt ist	Ja	Nein
Ist nicht ausgewählt	Prüft ob eine Checkbox oder Radio nicht ausgewählt ist	Ja	Nein
Ist deaktiviert	Prüft ob das Element deaktiviert ist	Ja	Nein
Ist aktiviert	Prüft ob das Element aktiviert und interaktiv ist	Ja	Nein

Attribut-Prüfungen

Typ	Beschreibung	Benötigt Selektor	Benötigt Wert
Hat CSS-Klasse	Prüft ob das Element eine bestimmte CSS-Klasse hat	Ja	Ja

Seiteneigenschaften-Prüfungen

Typ	Beschreibung	Benötigt Selektor	Benötigt Wert
URL enthält	Prüft ob die aktuelle Seiten-URL Text enthält	Nein	Ja
Titel enthält	Prüft ob der Seitentitel Text enthält	Nein	Ja

Erweitert

Typ	Beschreibung	Benötigt Selektor	Benötigt Wert
Benutzerdefiniert...	Komplexe Bedingungen mit visuellem Builder oder Code erstellen	Abhängig	Abhängig

Beispiele

Element ist sichtbar prüfen

Selektor: .success-message
Erwarteter Wert: Ist sichtbar
Beschreibung: Erfolgsmeldung verifizieren

Element enthält Text prüfen

Selektor: .error-message
Erwarteter Wert: Enthält Text
Wert: Ungültige E-Mail
Beschreibung: Fehlermeldung verifizieren

Eingabefeldwert prüfen

Selektor: #email-input
Erwarteter Wert: Eingabewert stimmt überein
Wert: benutzer@beispiel.de
Beschreibung: E-Mail wurde korrekt eingegeben

Checkbox ist ausgewählt prüfen

Selektor: #terms-checkbox
Erwarteter Wert: Ist ausgewählt
Beschreibung: AGB-Checkbox ist aktiviert

Seiten-URL nach Weiterleitung prüfen

Erwarteter Wert: URL enthält
Wert: /dashboard
Beschreibung: Weiterleitung zum Dashboard verifizieren

Benutzerdefinierte Assertions

Für Validierungslogik, die mit den eingebauten Assertion-Typen nicht abbildbar ist, verwenden Sie die Benutzerdefiniert-Option. Dies öffnet ein Modal mit zwei Modi:

Visueller Builder

Erstellen Sie komplexe Bedingungen mit UND/ODER-Logik ohne Code:

1. Wählen Sie Benutzerdefiniert... aus dem Erwarteter-Wert-Dropdown
2. Klicken Sie Bedingung hinzufügen um einzelne Prüfungen hinzuzufügen
3. Klicken Sie Gruppe hinzufügen um verschachtelte Bedingungsgruppen zu erstellen
4. Klicken Sie auf das UND/ODER-Badge zwischen Bedingungen um den Operator umzuschalten
5. Kombinieren Sie mehrere Bedingungen für komplexe Validierungen

Beispiel: Prüfen ob entweder Erfolgsmeldung ODER Weiterleitung erfolgt ist

Bedingung 1: .success-message → Ist sichtbar
ODER
Bedingung 2: URL enthält → /danke

Beispiel: Mehrere Elemente sind sichtbar prüfen

Bedingung 1: .header → Ist sichtbar
UND
Bedingung 2: .content → Ist sichtbar
UND
Bedingung 3: .footer → Ist sichtbar

Code-Editor

Schreiben Sie benutzerdefinierten JavaScript-Code, der in Playwright ausgeführt wird:

// Element-Anzahl prüfen
const count = await page.locator('.product-item').count();
if (count < 3) {
  throw new Error(`Mindestens 3 Produkte erwartet, ${count} gefunden`);
}

Verfügbare Variablen:

• page - Playwright Page-Objekt
• element - Locator für den Selektor
• selector - Der CSS-Selektor als String
• expect - Playwright expect-Funktion

Beispiel: Berechneten CSS-Stil prüfen

const color = await element.evaluate(el =>
  getComputedStyle(el).backgroundColor
);
if (!color.includes('rgb(0, 128, 0)')) {
  throw new Error(`Grüner Hintergrund erwartet, ${color} erhalten`);
}

Tipps

• Assertions nach wichtigen Aktionen hinzufügen
• Erfolgsmeldungen und Fehlerzustände verifizieren
• Weiterleitungen mit URL-Assertions prüfen
• "Enthält" für teilweise Übereinstimmungen, "Stimmt überein" für exakte Übereinstimmungen verwenden
• Benutzerdefinierte Assertions für komplexe Multi-Bedingungs-Prüfungen verwenden
• Der visuelle Builder ist einfacher für Anfänger; der Code-Editor gibt volle Kontrolle

Häufige Probleme

Assertion schlägt unerwartet fehl

• Element braucht Zeit zum Erscheinen (Warten vor Prüfen hinzufügen)
• Text stimmt nicht exakt überein ("Enthält" statt "Stimmt überein" verwenden)
• Selektor ist falsch
• Seite hat sich seit Testerstellung geändert

Benutzerdefinierte Assertion funktioniert nicht

• Auf JavaScript-Syntaxfehler prüfen ("Syntax testen"-Button verwenden)
• Bei Fehler muss ein Error geworfen werden (nicht nur false zurückgeben)
• await für alle asynchronen Operationen verwenden

5. Warten

Pausiert die Ausführung für eine bestimmte Dauer.

Wann Warten verwenden

Warten-Steps sind nützlich, sollten aber sparsam eingesetzt werden:

• Warten auf langsam ladende Elemente
• Zeit für Animationen lassen
• Warten auf AJAX-Anfragen
• Zeit für Weiterleitungen lassen

Konfiguration

Dauer (erforderlich)

• Wartezeit in Millisekunden
• 1000ms = 1 Sekunde

Warten nicht überstrapazieren

• Verwenden Sie Warten sparsam (sie verlangsamen Tests)
• Warten allein behebt keine instabilen Tests
• Besser die Ursache beheben als längere Wartezeiten hinzufügen

6. Scrollen

Scrollt die Seite, um ein Element in Sicht zu bringen.

Anwendungsfälle

• Elemente unterhalb des sichtbaren Bereichs zeigen
• Lazy-Loading auslösen
• Zu Formularabschnitten scrollen
• Footer-Inhalt erreichen

7. Hover

Bewegt die Maus über ein Element, um Hover-Effekte auszulösen.

Anwendungsfälle

• Dropdown-Menüs zeigen
• Tooltips anzeigen
• Hover-Animationen auslösen
• :hover CSS-Zustände testen
• Mega-Menüs aktivieren

8. Auswählen (Option)

Wählt eine Option aus einem Dropdown (select-Element).

Anwendungsfälle

• Aus Dropdown-Menüs wählen
• Land/Bundesland auswählen
• Mengen wählen
• Kategorien auswählen

9. Checkbox

Aktiviert oder deaktiviert eine Checkbox.

Anwendungsfälle

• AGB akzeptieren
• Optionen aktivieren
• Mehrere Elemente auswählen
• Einstellungen umschalten

10. Radio

Wählt einen Radio-Button aus einer Gruppe.

Anwendungsfälle

• Zahlungsmethoden wählen
• Optionen auswählen
• Quiz-Fragen beantworten
• Versandmethoden wählen

11. Visual Check

Erstellt einen Screenshot und vergleicht ihn mit einem Referenzbild, um visuelle Veraenderungen zu erkennen. Damit lassen sich Layout-Probleme, fehlende Styles oder kaputte Elemente finden, die funktionale Tests nicht erkennen.

Anwendungsfaelle

• Kaputte Layouts nach Plugin- oder Theme-Updates erkennen
• Sicherstellen, dass das Seitendesign ueber die Zeit konsistent bleibt
• Fehlende Bilder, Schriften oder CSS-Probleme aufdecken
• Visuelle Integritaet wichtiger Landing Pages ueberwachen

Konfiguration

Differenz-Schwellwert (optional, Standard: 15%)

• Wie viel visuelle Abweichung erlaubt ist, bevor der Step fehlschlaegt
• Hoeher setzen (z.B. 20-30%) fuer Seiten mit dynamischem Inhalt
• Niedriger setzen (z.B. 1-5%) fuer statische Seiten, die sich nie aendern sollten

Dynamische Elemente ausschliessen (optional)

• CSS-Selektoren fuer Seitenbereiche, die sich haeufig aendern (Blog-Feeds, Datumsangaben, Slider, Banner)
• Diese Bereiche werden vor dem Screenshot ausgeblendet
• Verwenden Sie den Element-Picker zur visuellen Auswahl oder geben Sie Selektoren manuell ein

So funktioniert es

1. Erster Durchlauf: Ein Screenshot wird erstellt und als Referenzbild gespeichert. Der Step ist immer erfolgreich.
2. Folgende Durchlaeufe: Ein neuer Screenshot wird aufgenommen und Pixel fuer Pixel mit der Referenz verglichen. Ueberschreitet die Abweichung den Schwellwert, schlaegt der Step fehl.
3. Einstellungen geaendert: Wenn Sie den Schwellwert oder die ausgeschlossenen Elemente aendern, wird die Referenz beim naechsten Durchlauf automatisch neu erstellt.

Referenz-Screenshot verwalten

• Klicken Sie auf "View reference" in der Step-Konfiguration, um den aktuellen Referenz-Screenshot anzuzeigen
• Klicken Sie auf "Reset Reference", um ihn zu loeschen — beim naechsten Durchlauf wird ein neuer erstellt
• Die Referenz wird automatisch aktualisiert, wenn sich Ihre Visual-Check-Einstellungen aendern

Beispiel

Typ: Visual Check
Schwellwert: 15%
Ausschliessen: .blog-feed, .date-widget
Beschreibung: Homepage-Layout pruefen

Tipps

• Platzieren Sie den Visual Check nach einer Navigation — er erfasst, was gerade sichtbar ist
• Schliessen Sie Elemente aus, die sich bei jedem Besuch aendern (Datum, neueste Beitraege, Werbung)
• Beginnen Sie mit dem Standard-Schwellwert von 15% und passen Sie ihn nach Bedarf an
• Verwenden Sie mehrere Visual Check Steps, um verschiedene Seiten in einem Flow zu ueberwachen

Haeufige Probleme

Step schlaegt nach Inhaltsaktualisierung fehl

• Das ist erwartet — die Seite sieht anders aus als die Referenz
• Fuehren Sie den Flow einmal aus, um eine neue Referenz zu erstellen, oder setzen Sie die Referenz manuell zurueck

Step schlaegt fehl, aber die Seite sieht gut aus

• Dynamischer Inhalt koennte die Abweichung verursachen — fuegen Sie diese Bereiche unter "Dynamische Elemente ausschliessen" hinzu
• Erhoehen Sie den Schwellwert, wenn kleine Unterschiede akzeptabel sind

Tipps

Den richtigen Step Type verwenden

Aktion	✅ Verwenden	❌ Vermeiden
Seite öffnen	Navigieren-Step	Klick auf Link
Text eingeben	Ausfüllen-Step	Klicken + Tippen
Dropdown auswählen	Auswählen-Step	Klicken + Klicken

Beschreibungen hinzufügen

Jeder Step verdient eine Beschreibung

✅ Gut	❌ Schlecht
"Submit-Button im Kontaktformular klicken"	Keine Beschreibung
"E-Mail im Rechnungsfeld eingeben"	"Tippen"

Aktionen verifizieren

Regel: Nach jeder wichtigen Aktion einen Prüfen-Step hinzufügen.

Nach dieser Aktion	Dies prüfen
Login	Dashboard sichtbar
Formular absenden	Erfolgsmeldung erscheint
Suche	Ergebnisse werden angezeigt
In Warenkorb	Warenkorbzähler erhöht

Nächste Schritte

• Flows ausführen - Ausführung und Überwachung
• Flow-Editor - Die Editor-Oberfläche im Detail
• Einstellungen - Standardverhalten konfigurieren