Flow-Editor
Der Flow-Editor ist der Ort, an dem Sie Ihre Test-Flows erstellen und konfigurieren. Er bietet eine visuelle, intuitive Oberfläche zum Erstellen automatisierter Tests ohne Programmierung.
Tastaturkürzel
Speichern: Cmd/Strg + S | Picker abbrechen: Escape
Übersicht
Der Flow-Editor ist in vier Hauptbereiche 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 wesentliche 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 bietet Werkzeuge zur Verwaltung.
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
Steps neu anordnen
Um die Reihenfolge der Steps zu ändern:
- 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
Aufnahme-Best-Practices
- Vorausplanen - Wissen, welche Aktionen Sie aufzeichnen möchten
- Langsam vorgehen - Zeit für Seitenladen zwischen Aktionen geben
- Danach überprüfen - Generierte Steps prüfen und anpassen
- Assertions hinzufügen - Aufnahme fügt keine Checks hinzu; manuell hinzufügen
Tipps für großartige Flows
Flows wie ein Profi erstellen
| 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 entsprechen echtem Verhalten |
| Assertions hinzufügen | Verifizieren, 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
Nächste Schritte
- Step Types - Alle verfügbaren Step Types
- Flows ausführen - Ausführung und Überwachung
- Einstellungen - Editor-Präferenzen konfigurieren