Step Types

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

Übersicht

Flowguard unterstützt 10 Step Types in Kategorien organisiert:

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
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)

Kritischer 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
• Elementvisibilität 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 bietet 16 Assertion-Typen in Kategorien organisiert:

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 komplexe Validierungslogik, die mit den eingebauten Assertion-Typen nicht erreicht werden kann, verwenden Sie die Benutzerdefiniert-Option. Dies öffnet ein Modal mit zwei Modi:

Visueller Builder

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

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 für maximale Flexibilität:

// 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 bietet maximale Leistung

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)
• Sicherstellen, dass bei Fehler ein Error geworfen wird (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 verwendet werden:

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

Konfiguration

Dauer (erforderlich)

• Wartezeit in Millisekunden
• 1000ms = 1 Sekunde

Warten-Übernutzung vermeiden

• Verwenden Sie Warten sparsam (sie verlangsamen Tests)
• Verlassen Sie sich nicht auf Warten, um instabile Tests zu beheben
• 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

Best Practices

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

Goldene 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 lernen
• Flow-Editor - Die Editor-Oberfläche beherrschen
• Einstellungen - Standardverhalten konfigurieren