Step Types

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

Übersicht

Flowguard unterstützt 12 Step Types in sechs Kategorien:

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
Visuell	Visual Check	Seitenaussehen gegen Referenz-Screenshot vergleichen
Timing	Warten, Scrollen, Hover	Flow-Steuerung und Sichtbarkeit
Erweitert	Code ausführen (1.1.0)	Eigenen JavaScript-Code ausführen

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)

Wichtiger 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
• Elementsichtbarkeit 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 hat 16 Assertion-Typen in fünf Kategorien:

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

Visueller Builder

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

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:

// 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 gibt volle Kontrolle

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)
• Bei Fehler muss ein Error geworfen werden (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 eingesetzt werden:

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

Konfiguration

Dauer (erforderlich)

• Wartezeit in Millisekunden
• 1000ms = 1 Sekunde

Warten nicht überstrapazieren

• Verwenden Sie Warten sparsam (sie verlangsamen Tests)
• Warten allein behebt keine instabilen Tests
• 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

11. Visual Check

Erstellt einen Screenshot und vergleicht ihn mit einem Referenzbild, um visuelle Veraenderungen zu erkennen. Damit lassen sich Layout-Probleme, fehlende Styles oder kaputte Elemente finden, die funktionale Tests nicht erkennen.

Anwendungsfaelle

• Kaputte Layouts nach Plugin- oder Theme-Updates erkennen
• Sicherstellen, dass das Seitendesign ueber die Zeit konsistent bleibt
• Fehlende Bilder, Schriften oder CSS-Probleme aufdecken
• Visuelle Integritaet wichtiger Landing Pages ueberwachen

Konfiguration

Differenz-Schwellwert (optional, Standard: 15%)

• Wie viel visuelle Abweichung erlaubt ist, bevor der Step fehlschlaegt
• Hoeher setzen (z.B. 20-30%) fuer Seiten mit dynamischem Inhalt
• Niedriger setzen (z.B. 1-5%) fuer statische Seiten, die sich nie aendern sollten

Dynamische Elemente ausschliessen (optional)

• CSS-Selektoren fuer Seitenbereiche, die sich haeufig aendern (Blog-Feeds, Datumsangaben, Slider, Banner)
• Diese Bereiche werden vor dem Screenshot ausgeblendet
• Verwenden Sie den Element-Picker zur visuellen Auswahl oder geben Sie Selektoren manuell ein

So funktioniert es

1. Erster Durchlauf: Ein Screenshot wird erstellt und als Referenzbild gespeichert. Der Step ist immer erfolgreich.
2. Folgende Durchlaeufe: Ein neuer Screenshot wird aufgenommen und Pixel fuer Pixel mit der Referenz verglichen. Ueberschreitet die Abweichung den Schwellwert, schlaegt der Step fehl.
3. Einstellungen geaendert: Wenn Sie den Schwellwert oder die ausgeschlossenen Elemente aendern, wird die Referenz beim naechsten Durchlauf automatisch neu erstellt.

Referenz-Screenshot verwalten

• Klicken Sie auf "View reference" in der Step-Konfiguration, um den aktuellen Referenz-Screenshot anzuzeigen
• Klicken Sie auf "Reset Reference", um ihn zu loeschen — beim naechsten Durchlauf wird ein neuer erstellt
• Die Referenz wird automatisch aktualisiert, wenn sich Ihre Visual-Check-Einstellungen aendern

Beispiel

Typ: Visual Check
Schwellwert: 15%
Ausschliessen: .blog-feed, .date-widget
Beschreibung: Homepage-Layout pruefen

Tipps

• Platzieren Sie den Visual Check nach einer Navigation — er erfasst, was gerade sichtbar ist
• Schliessen Sie Elemente aus, die sich bei jedem Besuch aendern (Datum, neueste Beitraege, Werbung)
• Beginnen Sie mit dem Standard-Schwellwert von 15% und passen Sie ihn nach Bedarf an
• Verwenden Sie mehrere Visual Check Steps, um verschiedene Seiten in einem Flow zu ueberwachen

Haeufige Probleme

Step schlaegt nach Inhaltsaktualisierung fehl

• Das ist erwartet — die Seite sieht anders aus als die Referenz
• Fuehren Sie den Flow einmal aus, um eine neue Referenz zu erstellen, oder setzen Sie die Referenz manuell zurueck

Step schlaegt fehl, aber die Seite sieht gut aus

• Dynamischer Inhalt koennte die Abweichung verursachen — fuegen Sie diese Bereiche unter "Dynamische Elemente ausschliessen" hinzu
• Erhoehen Sie den Schwellwert, wenn kleine Unterschiede akzeptabel sind

Tipps

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

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

12. Code ausführen (Run Code) (1.1.0)

Führt eigenen JavaScript-Code während eines Flows aus. Nutze diesen Step für alles, was die eingebauten Steps nicht abdecken — eigene Validierungen, Werte von der Seite auslesen, API-Aufrufe oder Daten zwischen Steps teilen.

Modi

Browser-Modus (Standard)

Der Code läuft innerhalb der Seite mit vollem DOM-Zugriff, wie in der Browser-Konsole. Zusätzlich stehen Helpers zur Verfügung, um mit der Seite zu interagieren und externe APIs aufzurufen.

Verfügbare Funktionen:

• document, window — Standard-DOM-APIs
• console.log() — Ausgabe wird in den Testergebnissen angezeigt
• assert(bedingung, nachricht) — lässt den Step fehlschlagen, wenn die Bedingung falsch ist
• store(name, wert) — speichert einen Wert für spätere Steps (siehe Daten zwischen Steps teilen)
• get(name) — liest einen gespeicherten Wert aus einem vorherigen Code-Step
• env.KEY_NAME — liest eine Umgebungsvariable (siehe Umgebungsvariablen)
• localStorage, sessionStorage — Standard-Web-APIs

Helpers (funktionieren in beiden Modi):

• helpers.click(selector) — Element anklicken
• helpers.fill(selector, wert) — Text in ein Feld eingeben
• helpers.getText(selector) — Textinhalt auslesen
• helpers.waitFor(selector) — auf ein Element warten
• helpers.waitForURL(pattern) — auf Navigation warten
• helpers.pressKey(key) — Taste drücken (z.B. 'Enter', 'Tab')
• helpers.selectOption(selector, wert) — Dropdown-Option auswählen
• helpers.getCount(selector) — Elemente zählen
• helpers.isVisible(selector) — Sichtbarkeit prüfen
• helpers.getAttribute(selector, attr) — Attributwert lesen
• helpers.screenshot() — Screenshot aufnehmen
• helpers.fetch(url, optionen) — Externe API aufrufen (CORS-frei, läuft serverseitig)
• helpers.log(nachricht) — Ausgabe in Testergebnissen
• helpers.assert(bedingung, nachricht) — fehlschlagen wenn Bedingung falsch
• helpers.store(name, wert) — Wert für spätere Steps speichern
• helpers.get(name) — gespeicherten Wert lesen

Playwright-Modus (nur Local API)

Der Code läuft in Node.js mit Zugriff auf das Playwright page-Objekt und Hilfsfunktionen.

WARNING

Der Playwright-Modus ist nur mit dem Local API Runner (selbst gehostet) verfügbar. Auf dem Cloud-Runner ist er nicht verfügbar, da der Code direkt auf dem Server ausgeführt wird. Wenn du die Cloud API nutzt, verwende den Browser-Modus — er deckt die meisten Anwendungsfälle ab.

Verfügbare Variablen:

• page — Playwright Page-Objekt
• step — aktuelle Step-Daten
• env — Umgebungsvariablen (siehe Umgebungsvariablen)
• helpers — Hilfsfunktionen:
  • helpers.click(selector) — Element anklicken
  • helpers.fill(selector, wert) — Text in ein Feld eingeben
  • helpers.getText(selector) — Textinhalt auslesen
  • helpers.waitFor(selector) — auf ein Element warten
  • helpers.wait(ms) — Pause
  • helpers.screenshot() — Screenshot aufnehmen
  • helpers.log(nachricht) — Ausgabe (wird in den Ergebnissen angezeigt)
  • helpers.assert(bedingung, nachricht) — fehlschlagen wenn Bedingung falsch
  • helpers.store(name, wert) — Wert für spätere Steps speichern
  • helpers.get(name) — gespeicherten Wert aus einem vorherigen Code-Step lesen

Konfiguration

Code (erforderlich)

• Der auszuführende JavaScript-Code
• Klicke auf "Format" in der Editor-Leiste, um den Code automatisch zu formatieren

Modus

• Browser (Standard) oder Playwright

Timeout

• Maximale Ausführungszeit (Standard: 30s)

assert() verwenden

Verwende assert(), um einen Code-Step fehlschlagen zu lassen, wenn eine Bedingung nicht erfüllt ist. So wird der Code-Step zu einer eigenen Prüfung.

// Browser-Modus
var heading = document.querySelector('h1');
assert(heading, 'Kein H1 auf der Seite gefunden');
assert(heading.textContent.includes('Willkommen'), 'H1 enthält nicht Willkommen');

// Playwright-Modus
const count = await page.locator('.product').count();
helpers.assert(count > 0, 'Keine Produkte auf der Seite gefunden');
helpers.log('Gefunden: ' + count + ' Produkte');

Konsolenausgabe

Ausgaben von console.log() (Browser-Modus) oder helpers.log() (Playwright-Modus) werden in den Testergebnissen angezeigt. Nutze das zum Debuggen oder zur Nachverfolgung von Werten.

var price = document.querySelector('.price').textContent;
console.log('Aktueller Preis:', price);

Daten zwischen Steps teilen

Verwende store(), um einen Wert aus einem Code-Step zu speichern, und in den Feldern späterer Steps oder get() in einem weiteren Code-Step, um den Wert wieder auszulesen.

Step 1 — Code-Step: Wert auslesen und speichern

var price = document.querySelector('.total-price').textContent;
store('gesamtpreis', price);
console.log('Gespeicherter Preis:', price);

Step 2 — Prüfen-Step: Gespeicherten Wert überprüfen

Erwarteter Wert: {{gesamtpreis}}

Step 3 — Ausfüllen-Step: Wert in einem Eingabefeld verwenden

Wert: Bestellsumme war {{gesamtpreis}}

Gespeicherte Werte in einem weiteren Code-Step verwenden

Nutze get(), um einen gespeicherten Wert in einem Code-Step auszulesen. Das ist sicherer als im Code, da Sonderzeichen korrekt behandelt werden.

// Browser-Modus
var price = get('gesamtpreis');
assert(price !== null, 'Preis wurde nicht gespeichert');
console.log('Preis von vorher:', price);

// Playwright-Modus
const price = helpers.get('gesamtpreis');
helpers.assert(price !== null, 'Preis wurde nicht gespeichert');

Wo funktioniert:

• Wert — für Ausfüllen, Warten, Auswählen und andere Steps
• Selektor — für Klicken, Ausfüllen, Prüfen und andere Steps
• Erwarteter Wert — für Prüfen-Steps

Limits:

• Variablennamen: nur Buchstaben, Zahlen und Unterstriche, max. 64 Zeichen
• Variablenwerte: max. 10.000 Zeichen (wird bei Überschreitung gekürzt)
• Max. 50 gespeicherte Variablen pro Flow-Durchlauf
• Variablen existieren nur während eines Flow-Durchlaufs — sie werden nicht zwischen Durchläufen gespeichert

TIP

Verwende aussagekräftige Namen wie produktName oder warenkorbSumme, um deine Flows lesbar zu halten.

Umgebungsvariablen

Code-Steps können auf Umgebungsvariablen zugreifen, die unter Einstellungen → Erweitert gespeichert sind. So lassen sich API-Keys, Zugangsdaten und andere Secrets sicher verwenden, ohne sie direkt im Flow-Code zu hinterlegen.

Browser-Modus:

var apiKey = env.MY_API_KEY;
var response = await fetch('https://api.example.com/data', {
  headers: { 'Authorization': 'Bearer ' + apiKey }
});
var data = await response.json();
console.log('Ergebnis:', data);

Playwright-Modus:

const apiKey = env.MY_API_KEY;
const response = await helpers.fetch('https://api.example.com/data', {
  headers: { 'Authorization': 'Bearer ' + apiKey }
});
helpers.log('Ergebnis: ' + JSON.stringify(response));

TIP

Umgebungsvariablen werden verschlüsselt in deiner WordPress-Datenbank gespeichert und nur zur Laufzeit in den Code-Step injiziert. Die Schlüsselnamen müssen Großbuchstaben, Zahlen und Unterstriche verwenden (z.B. API_KEY, SMTP_PASSWORD).

Beispiele

Modus: Browser
Code: assert(document.title.length > 0, 'Seite hat keinen Titel');
Beschreibung: Prüfen ob die Seite einen Titel hat

Modus: Browser
Code: store('anzahl', document.querySelectorAll('.cart-item').length);
Beschreibung: Warenkorb-Artikel zählen

Modus: Playwright
Code: await helpers.fill('#search', 'test'); await helpers.click('.search-btn'); await helpers.waitFor('.results');
Beschreibung: Suche ausführen und auf Ergebnisse warten

Externe APIs aufrufen

Verwende helpers.fetch(), um während eines Flows externe APIs aufzurufen — z.B. E-Mail-Testdienste (Mailosaur, mail.tm), SMS-Verifizierung (Twilio) oder beliebige REST-APIs. Der Request läuft serverseitig, daher gibt es keine CORS-Einschränkungen.

// Daten von einer externen API abrufen
var res = await helpers.fetch('https://api.example.com/data', {
    headers: { 'Authorization': 'Bearer DEIN_KEY' }
});
assert(res.ok, 'API-Fehler: ' + res.status);
console.log('Antwort:', res.data);

Code testen

Der Code-Editor hat einen Test-Button, der den Code direkt gegen die Live-Vorschau ausführt. Damit kannst du schnell prüfen, ob Selektoren funktionieren, Assertions passen und die Konsolenausgabe stimmt — ohne den ganzen Flow zu starten.

Wenn dein Flow vorherige Code-Steps mit store()-Aufrufen hat, werden diese zuerst ausgeführt, damit deine Variablen verfügbar sind.

Tipps

• helpers funktionieren in beiden Modi — du brauchst keinen Playwright-Modus um zu klicken, auszufüllen oder zu fetchen
• helpers.fetch() ist CORS-frei — läuft serverseitig, du kannst jede externe API aufrufen
• assert() ist der einfachste Weg, einen Step bei einer Bedingung fehlschlagen zu lassen
• Verwende store() + , um dynamische Flows zu erstellen, die sich an Seiteninhalte anpassen
• Verwende den Test-Button, um Code schnell gegen die Live-Vorschau zu debuggen
• Konsolenausgaben erscheinen in den Testergebnissen — nutze sie zum Debuggen

Nächste Schritte

• Flows ausführen - Ausführung und Überwachung
• Flow-Editor - Die Editor-Oberfläche im Detail
• Einstellungen - Standardverhalten konfigurieren