Erste Schritte
Willkommen bei Flowguard! Diese Anleitung hilft Ihnen beim Einstieg in die Erstellung automatisierter Test-Flows für Ihre WordPress-Website.
Was Sie erstellen werden
Am Ende dieser Anleitung haben Sie Ihren ersten automatisierten Test erstellt, der prüft, ob Ihre Startseite korrekt lädt. Keine Programmierkenntnisse erforderlich - einfach zeigen, klicken und testen!
Was Sie lernen werden
- Wie Sie auf Flowguard in WordPress zugreifen
- Flows und Steps verstehen
- Ihren ersten Test-Flow erstellen
- Ausführen und Ergebnisse ansehen
Voraussetzungen
Checkliste - Zum Überprüfen aufklappen
- [ ] Flowguard-Plugin ist auf Ihrer WordPress-Website installiert und aktiviert
- [ ] Sie haben Admin-Zugang zu WordPress
- [ ] Ihre Website ist über den Browser erreichbar
Auf Flowguard zugreifen
Sobald das Plugin aktiviert ist, können Sie Flowguard über Ihr WordPress-Admin-Panel erreichen:
- Melden Sie sich in Ihrem WordPress-Admin-Dashboard an
- Suchen Sie Flowguard im linken Seitenmenü
- Klicken Sie auf Flowguard, um das Plugin zu öffnen
Sie landen auf dem Dashboard, das Ihnen einen Überblick über alle Ihre Test-Flows gibt.
Wichtige Konzepte verstehen
Flows
Ein Flow ist eine Sequenz automatisierter Aktionen, die eine bestimmte Benutzerreise oder Funktion auf Ihrer Website testet. Zum Beispiel:
- Testen, ob Benutzer sich erfolgreich anmelden können
- Überprüfen, ob ein Kontaktformular korrekt abgesendet wird
- Prüfen, ob Produkte in den Warenkorb gelegt werden können
- Sicherstellen, dass die Suchfunktion funktioniert
Jeder Flow hat:
- Einen Titel zur Identifizierung
- Einen Status (aktiv oder inaktiv)
- Eine Reihe von Steps, die definieren, welche Aktionen ausgeführt werden
- Ergebnisse vom letzten Durchlauf
Steps
Steps sind einzelne Aktionen innerhalb eines Flows. Jeder Step führt eine bestimmte Aufgabe aus, wie:
- Eine Seite öffnen
- Einen Button klicken
- Ein Formularfeld ausfüllen
- Überprüfen, ob bestimmter Inhalt erscheint
Steps werden der Reihe nach ausgeführt, einer nach dem anderen, um zu simulieren, wie ein echter Benutzer mit Ihrer Website interagieren würde.
TIP
Flows beginnen oft mit einem Navigieren-Step, um eine bestimmte Seite zu öffnen, aber das ist nicht erforderlich. Wenn Sie Elemente auf der aktuell sichtbaren Seite testen, können Sie mit jedem Step Type beginnen (Klicken, Ausfüllen, Prüfen, etc.).
Ihren ersten Flow erstellen
Lassen Sie uns einen einfachen Test-Flow erstellen, der Ihre Startseite öffnet und überprüft, ob der Website-Titel sichtbar ist.
Schritt 1: Zu Flows navigieren
- Klicken Sie auf Flows in der Flowguard-Seitenleiste
- Klicken Sie auf den Flow erstellen-Button oben rechts
Schritt 2: Ihren Flow benennen
- Im Flow-Editor sehen Sie oben in der Mitte ein Textfeld
- Geben Sie einen beschreibenden Namen ein, wie "Startseiten-Test"
- Der Flow wird automatisch auf Aktiv gesetzt (angezeigt durch den grünen Button)
Schritt 3: Steps hinzufügen
Sie können Steps auf zwei Arten hinzufügen:
Option A: Aufnahmemodus verwenden (Empfohlen für Anfänger) 🎥
Der Aufnahmemodus ist der schnellste Weg, Flows zu erstellen. Flowguard beobachtet Ihre Interaktionen und generiert automatisch die Steps!
- Klicken Sie auf den Aufnahme-Button im linken Panel
- Der Vorschau-Rahmen wird rot, was anzeigt, dass die Aufnahme aktiv ist
- Im Vorschau-Panel geben Sie Ihre Startseiten-URL ein und klicken auf Seite laden
- Nach dem Laden interagieren Sie mit Ihrer Website:
- Klicken Sie auf Elemente, die Sie testen möchten
- Füllen Sie Formularfelder aus
- Navigieren Sie zu verschiedenen Seiten
- Klicken Sie auf Stop, um die Aufnahme zu beenden
- Flowguard hat automatisch Steps für alle Ihre Aktionen erstellt!
- Fügen Sie manuell einen Prüfen-Step hinzu, um zu verifizieren, dass der Website-Titel sichtbar ist
TIP
Der Aufnahmemodus erfasst Klicks, Eingaben und Navigation automatisch. Überprüfungs-Steps (Assertions) müssen Sie danach manuell hinzufügen, um zu kontrollieren, ob alles korrekt funktioniert hat.
Option B: Steps manuell hinzufügen
Wenn Sie mehr Kontrolle bevorzugen, können Sie jeden Step einzeln hinzufügen:
Einen Navigieren-Step hinzufügen
- Klicken Sie auf den + Step hinzufügen-Button im linken Panel
- Wählen Sie Seite öffnen aus dem Menü
- Im Konfigurationspanel unten:
- Geben Sie die URL Ihrer Website im URL-Feld ein
- Fügen Sie eine Beschreibung hinzu wie "Startseite öffnen"
- Klicken Sie außerhalb oder drücken Sie Enter zum Bestätigen
Einen Prüfen-Step hinzufügen
- Klicken Sie erneut auf + Step hinzufügen
- Wählen Sie Prüfen aus dem Menü
- Im Konfigurationspanel:
- Klicken Sie auf Element auswählen, um den Selektor-Modus zu aktivieren
- Im Vorschau-Panel geben Sie Ihre Startseiten-URL ein und klicken auf Seite laden
- Nach dem Laden der Seite klicken Sie auf Ihren Website-Titel oder die Hauptüberschrift
- Der Selektor wird automatisch ausgefüllt
- Wählen Sie einen Assertion-Typ (z.B. "Element ist sichtbar")
- Fügen Sie eine Beschreibung hinzu wie "Website-Titel erscheint"
Schritt 4: Ihren Flow speichern
- Klicken Sie auf den Speichern-Button oben rechts
- Sie sehen eine Erfolgsmeldung, die bestätigt, dass Ihr Flow gespeichert wurde
Schritt 5: Ihren Flow ausführen
- Sie werden zur Flow-Liste zurückgeleitet
- Finden Sie Ihren "Startseiten-Test"-Flow
- Klicken Sie auf den Flow ausführen-Button (Play-Symbol)
- Beobachten Sie, wie der Flow ausgeführt wird
- Sehen Sie die Ergebnisse - Sie sollten "Bestanden" mit einem grünen Häkchen sehen
Herzlichen Glückwunsch! Sie haben Ihren ersten Test-Flow erstellt und ausgeführt.
Den Flow-Editor verstehen
Der Flow-Editor ist in mehrere Bereiche unterteilt:
Kopfzeile
- Zurück-Button - Zurück zur Flow-Liste
- Flow-Titel - Bearbeiten Sie den Namen Ihres Flows
- Status-Umschalter - Zwischen Aktiv/Inaktiv wechseln
- Speichern-Button - Änderungen speichern
Linkes Panel: Step-Liste
Zeigt alle Steps in Ihrem Flow. Sie können:
- Auf einen Step klicken, um ihn zu konfigurieren
- Steps per Drag & Drop neu anordnen
- Steps duplizieren oder löschen
- Neue Steps mit dem + Step hinzufügen-Button hinzufügen
Mitte: Live-Vorschau
Zeigt Ihre Website in einem eingebetteten Browser. Sie können:
- Jede URL zur Vorschau eingeben
- Auf Elemente klicken, um sie auszuwählen (im Selektor-Modus)
- Ihre Website in Echtzeit sehen, während Sie Flows erstellen
Unteres Panel: Step-Konfiguration
Wenn Sie einen Step auswählen, erscheint dieses Panel mit:
- Step Type-Informationen
- Konfigurationsfeldern (URL, Selektor, Text, etc.)
- Element-Picker-Button
- Beschreibungsfeld
Tipps für Anfänger
🎥 Aufnahmemodus ist Ihr bester Freund
Der einfachste Weg, Flows zu erstellen, ist der Aufnahmemodus:
- Klicken Sie einfach auf "Aufnahme" und interagieren Sie mit Ihrer Website
- Flowguard generiert automatisch die Steps
- Perfekt zum schnellen Erfassen von Benutzer-Workflows
- Fügen Sie danach Assertions hinzu, um Ergebnisse zu überprüfen
Einfach beginnen
Beginnen Sie mit einfachen Flows, die grundlegende Funktionalität testen:
| Gute erste Flows | Warum hier starten |
|---|---|
| Startseite lädt | Schneller Erfolg, baut Vertrauen auf |
| Navigation funktioniert | Testet Kernfunktionalität |
| Login-Seite erreichbar | Essentiell für die meisten Websites |
Beschreibende Namen verwenden
Geben Sie Ihren Flows und Steps klare, beschreibende Namen:
| ✅ Gut | ❌ Schlecht |
|---|---|
| "Kontaktformular-Absendung testen" | "Test 1" |
| "Benutzer-Login - Gültige Daten" | "Login" |
| "Produkt in Warenkorb - Einfach" | "Warenkorb-Test" |
Wann Sie Ihre Flows ausführen sollten
Machen Sie es zur Gewohnheit, Ihre Flows auszuführen:
- Nach WordPress- oder Plugin-Updates
- Nach Theme-Änderungen
- Nach dem Hinzufügen neuer Funktionen
- Vor dem Pushen von Änderungen in die Produktion
Nächste Schritte
Jetzt, da Sie Ihren ersten Flow erstellt haben, erkunden Sie weitere Funktionen:
- Dashboard - Lernen Sie Monitoring und Statistiken kennen
- Flows verwalten - Fortgeschrittene Flow-Verwaltung
- Flow-Editor - Tiefer Einblick in die Editor-Oberfläche
- Step Types - Alle verfügbaren Step Types kennenlernen
- Website-Monitoring - Automatische Website-Überwachung einrichten
- PDF-Reports - Professionelle Reports erstellen
- WooCommerce-Tests - WooCommerce-Checkouts sicher testen
Hilfe benötigt?
Wenn Sie auf Probleme stoßen oder Fragen haben:
- Lesen Sie den entsprechenden Abschnitt im Benutzerhandbuch
- Schauen Sie in die Entwicklerreferenz für technische Details
- Kontaktieren Sie den Support für Unterstützung
Viel Erfolg beim Testen!