Flow-Editor
Im Flow-Editor erstellen und konfigurieren Sie Ihre Test-Flows. Die Oberfläche ist visuell aufgebaut - Sie brauchen keine Programmierkenntnisse.
Tastaturkürzel
Speichern: Cmd/Strg + S | Picker abbrechen: Escape
Übersicht
Der Flow-Editor ist in vier Bereiche unterteilt:
| Bereich | Position | Zweck |
|---|---|---|
| Kopfzeile | Oben | Titel, Status, Speichern-Steuerung |
| Step-Liste | Linkes Panel | Test-Steps verwalten |
| Live-Vorschau | Mitte | Website in Echtzeit anzeigen |
| Step-Konfiguration | Unteres Panel | Ausgewählte Steps konfigurieren |
Den Flow-Editor öffnen
Neuen Flow erstellen
- Gehen Sie zu Flows in der Seitenleiste
- Klicken Sie auf Flow erstellen
- Der Editor öffnet sich mit einem leeren Flow
Bestehenden Flow bearbeiten
- Gehen Sie zu Flows in der Seitenleiste
- Klicken Sie auf eine beliebige Flow-Karte
- Der Editor öffnet sich mit diesem Flow
Editor-Kopfzeile
Die Kopfzeile enthält die Steuerelemente für Ihren Flow:
Linker Bereich: Zurück-Button
- Klicken Sie auf ← Zurück, um zur Flow-Liste zurückzukehren
- Bei ungespeicherten Änderungen sehen Sie einen Bestätigungsdialog
Mittlerer Bereich: Flow-Titel
- Klicken Sie auf das Titelfeld, um den Namen zu bearbeiten
- Geben Sie einen beschreibenden Namen ein (z.B. "Login-Test", "Kontaktformular-Validierung")
Rechter Bereich: Steuerelemente
Status-Umschalter
- Klicken Sie, um zwischen Aktiv (grün) und Inaktiv (grau) zu wechseln
- Aktive Flows können ausgeführt werden; inaktive sind pausiert
Speichern-Button
- Klicken Sie, um alle Änderungen zu speichern
- Tastaturkürzel: Cmd+S (Mac) oder Strg+S (Windows)
Step-Liste (linkes Panel)
Das linke Panel zeigt alle Steps in Ihrem Flow und die Werkzeuge zur Verwaltung.
KI-Assistent
Klicke auf den AI-Button in der Step-Liste, um die KI-Sidebar zu öffnen. Beschreibe in natürlicher Sprache, was du testen möchtest (z. B. „Kontaktformular ausfüllen und absenden") — die KI liest die Seite und generiert fertige Steps mit echten Selektoren. Prüfe die Vorschläge, wende sie mit einem Klick an und verfeinere oder erweitere sie im Chat-Verlauf. Da die KI die Seite so liest, wie sie in der Live-Vorschau tatsächlich gerendert ist, funktioniert sie auch mit JavaScript-gerenderten Formularen (z. B. WS Form), deren Felder nicht im rohen HTML stehen. Erfordert einen API-Key unter Einstellungen → Erweitert.
TIP
Damit die KI ein Formular „sehen" kann, öffne die Seite zuerst in der Live-Vorschau, sodass das Formular vollständig geladen ist, und lass dann die Steps generieren.
Zur Einrichtung (API-Key, Provider, Modell) und mehr Details siehe KI-Testgenerierung.
Step-Aktionen
Auswählen (Klick auf die Karte)
- Öffnet das Step-Konfigurationspanel
- Hebt den ausgewählten Step blau hervor
Duplizieren (Kopier-Symbol)
- Erstellt eine exakte Kopie des Steps
- Platziert sie direkt nach dem Original
Löschen (Papierkorb-Symbol)
- Entfernt den Step aus dem Flow
Umbenennen (Rechtsklick auf den Step)
- Rechtsklick auf einen Step öffnet das Kontextmenü mit Schritt umbenennen
- Gib dem Step einen eigenen Namen wie „Fetch API" oder „Cookies akzeptieren"
- Der eigene Name ersetzt das generische Typ-Label überall — in der Step-Liste, der Übersicht und den Ausführungs-Logs
- Leer lassen, um auf den Standard-Typnamen zurückzufallen
Steps neu anordnen
So ändern Sie die Reihenfolge der Steps:
- Klicken und halten Sie den Zieh-Griff (⋮⋮) auf einem Step
- Ziehen Sie den Step nach oben oder unten
- Lassen Sie los, um ihn an der neuen Position abzulegen
Steps werden von oben nach unten ausgeführt, daher ist die Reihenfolge wichtig.
Step-Validierung
Steps mit Fehlern zeigen:
- 🔴 Roten Rahmen um die Karte
- ⚠️ Fehler-Symbol
- Hovern Sie, um die Fehlermeldung zu sehen
| Häufiger Fehler | Lösung |
|---|---|
| Pflichtfelder fehlen | Alle erforderlichen Eingaben ausfüllen |
| Ungültiges URL-Format | https:// oder http:// einschließen |
| Leerer Selektor | Element-Picker verwenden oder manuell eingeben |
| Ungültiger Timeout-Wert | Positive Zahl eingeben |
Live-Vorschau (mittleres Panel)
Der mittlere Bereich zeigt eine eingebettete Ansicht Ihrer Website.
Vorschau-Kopfzeile
URL-Eingabe
- Geben Sie eine beliebige URL zur Vorschau ein
- Drücken Sie Enter oder klicken Sie auf Seite laden
Startseite-Button
- Schnellzugriff zum Laden Ihrer Startseite
Aktualisieren-Button
- Aktuelle Seite in der Vorschau neu laden
Vorschau-Modi
Normaler Modus
- Navigieren Sie Ihre Website normal
- Klicken Sie Links zum Navigieren
- Scrollen und interagieren Sie mit Elementen
Selektor-Modus (beim Element-Auswählen)
- Hovern Sie über Elemente, um sie hervorzuheben
- Klicken Sie, um ein Element auszuwählen
- Der Selektor wird automatisch generiert
Aufnahme-Modus (beim Aufzeichnen)
- Ihre Interaktionen werden als Steps erfasst
- Klicks, Tippen und Navigation werden aufgezeichnet
- Ein roter Rahmen zeigt aktive Aufnahme an
Aufnahmemodus
Aufnahmemodus
Der schnellste Weg, Flows zu erstellen. Flowguard beobachtet Ihre Interaktionen und generiert automatisch Steps.
So verwenden Sie die Aufnahme
- Klicken Sie auf den Aufnahme-Button im linken Panel
- Der Vorschau-Rahmen wird rot
- Interagieren Sie mit Ihrer Website:
- Elemente klicken → Erstellt Klicken-Steps
- In Felder tippen → Erstellt Ausfüllen-Steps
- Zu Seiten navigieren → Erstellt Navigieren-Steps
- Klicken Sie auf Stop, um die Aufnahme zu beenden
Was wird aufgezeichnet vs. was nicht
| ✅ Automatisch aufgezeichnet | ❌ Manuell hinzufügen |
|---|---|
| Klicks auf Buttons, Links | Hover-Interaktionen |
| Texteingaben in Formularfeldern | Prüfen (Verifizierungs)-Steps |
| Seitennavigation | Warten-Steps |
Aufnahme-Tipps
Tipps zur Aufnahme
- Vorausplanen - Wissen, welche Aktionen Sie aufzeichnen möchten
- Langsam vorgehen - Zeit für Seitenladen zwischen Aktionen lassen
- Danach überprüfen - Generierte Steps prüfen und anpassen
- Assertions hinzufügen - Die Aufnahme fügt keine Checks hinzu; manuell ergänzen
Tipps für gute Flows
Flows gut aufbauen
| Tun Sie das | Warum |
|---|---|
| Mit 2-3 Steps beginnen | Komplexität schrittweise aufbauen |
| Nach jeder Ergänzung testen | Probleme sofort beheben |
| Realistische Daten verwenden | Tests bilden echtes Verhalten ab |
| Assertions hinzufügen | Prüfen, dass Aktionen funktioniert haben |
| Timing beachten | Seitenladen und AJAX berücksichtigen |
Namenskonvention
| Typ | Beispiel |
|---|---|
| Flow-Name | "Login - Gültiger Benutzer" |
| Step-Beschreibung | "E-Mail-Adresse im Login-Formular eingeben" |
Timing beachten
Häufige Timing-Probleme
- Warten-Steps für langsam ladende Elemente hinzufügen
- Angemessene Timeouts in Flow-Einstellungen verwenden
- Animationen und AJAX berücksichtigen
- Wartezeiten nicht zu kurz oder zu lang machen
Admin- und Login-Seiten testen
Die Live-Vorschau des Flow Editors kann keine WordPress Admin- oder Login-Seiten (/wp-admin, /wp-login.php) laden. Das liegt daran, dass die Vorschau die Cookies deiner aktiven Admin-Sitzung teilt — das Laden der Login-Seite würde deine aktuelle Sitzung beeinträchtigen.
Das betrifft nur die Vorschau
Die eigentliche Flow-Ausführung nutzt einen separaten Playwright-Browser mit eigenen Cookies. Admin- und Login-Seiten funktionieren bei der Ausführung problemlos.
Login-Test-Flow erstellen
Wenn du im Flow Editor zu einer Admin- oder Login-URL navigierst, erscheint ein Info-Screen mit einem Create Login Test Steps Button. Dieser fügt automatisch folgende Steps hinzu:
| Step | Typ | Selector | Wert |
|---|---|---|---|
| Login-Seite öffnen | Open Page | — | /wp-login.php |
| Benutzername eingeben | Type Text | #user_login | dein Benutzername |
| Passwort eingeben | Type Text | #user_pass | dein Passwort |
| Login klicken | Click | #wp-submit | — |
| Login prüfen | Check | #wpadminbar | ist sichtbar |
Nach dem Klick auf den Button musst du nur noch Benutzername und Passwort in den Step-Einstellungen anpassen und auf Run klicken.
Admin-Workflows testen
Um Abläufe im WordPress-Admin zu testen (z.B. Seite erstellen, Einstellungen ändern):
- Starte deinen Flow mit den Login-Steps oben
- Füge einen Go to Page Step mit der Admin-URL hinzu (z.B.
/wp-admin/post-new.php) - Füge deine Test-Steps hinzu (Fill, Click, Check) mit den passenden Selektoren
- Nutze die Entwicklertools deines Browsers (Element untersuchen), um die richtigen Selektoren für Admin-Elemente zu finden
Nur manuelle Steps
Da die Vorschau keine Admin-Seiten anzeigen kann, müssen alle Admin-Steps manuell erstellt werden. Nutze den Inspektor deines Browsers auf der tatsächlichen Admin-Seite, um die CSS-Selektoren zu finden.
Nächste Schritte
- Step Types - Alle verfügbaren Step Types
- Flows ausführen - Ausführung und Überwachung
- Einstellungen - Editor-Präferenzen konfigurieren