Erste Schritte
Diese Anleitung hilft Ihnen beim Einstieg in Flowguard und 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 nötig - 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, erreichen Sie Flowguard über Ihr WordPress-Admin-Panel:
- 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.
Grundlegende Konzepte
Flows
Ein Flow ist eine Abfolge 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
- Prüfen, ob 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, und bilden so das Verhalten eines echten Benutzers nach.
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
Erstellen Sie einen einfachen Test-Flow, 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 wollen, 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
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 - Namen Ihres Flows bearbeiten
- 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 nutzen
Der einfachste Weg, Flows zu erstellen, ist der Aufnahmemodus:
- Klicken Sie auf "Aufnahme" und interagieren Sie mit Ihrer Website
- Flowguard generiert automatisch die Steps
- Gut geeignet 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 | Relevant 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 - Monitoring und Statistiken
- Flows verwalten - Flow-Verwaltung
- Flow-Editor - Die Editor-Oberfläche im Detail
- Step Types - Alle verfügbaren Step Types
- Website-Monitoring - Automatische Website-Überwachung einrichten
- PDF-Reports - 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