SureCart Testing Guide

Diese Anleitung erklaert, wie Sie SureCart-Checkout-Flows mit Flowguard testen, ohne echte Bestellungen zu erstellen oder echte Zahlungen zu verarbeiten.

Bevor Sie beginnen

Aktivieren Sie immer den Test Mode, bevor Sie SureCart-Flows testen! Ohne Test Mode werden echte Bestellungen erstellt und Zahlungen ueber SureCart verarbeitet.

Uebersicht

SureCart stellt durch seine Architektur besondere Anforderungen an automatisierte Tests. Flowguard behandelt diese Anforderungen automatisch.

Technische Herausforderungen, die Flowguard loest

Herausforderung	Beschreibung	Flowguard-Loesung
Shadow DOM	SureCart verwendet Web Components mit Shadow DOM, wodurch Elemente fuer Standard-Selektoren unsichtbar sind	Automatische Shadow DOM-Traversierung - der Selector Picker und Test Runner durchdringen Shadow-Grenzen
SaaS-Architektur	SureCart ist ein Cloud-basierter Dienst mit API-Aufrufen zu externen Servern	API-Abfangung - blockiert bestellungserzeugende Endpunkte, waehrend Warenkorb/Checkout-Funktionalitaet erhalten bleibt
Echtzeit-Status	Checkout-Status wird serverseitig ueber API verwaltet	Session-bewusster Test Mode, der die Warenkorb-Persistenz ueber Seitennavigationen hinweg aufrechterhaelt

Test Mode Schutzfunktionen

Wenn der Test Mode aktiviert ist, schuetzt Flowguard Folgendes:

Schutz	Was es tut
Keine echten Bestellungen	Checkout-Finalisierung auf API-Ebene blockiert
Keine Zahlungsverarbeitung	Payment Intents abgefangen bevor Stripe/PayPal
Automatischer Sandbox-Modus	Zwingt SureCart, Test-/Sandbox-Zahlungsanbieter zu verwenden
Warenkorb-Erhaltung	Warenkorb funktioniert waehrend des Tests normal
Kundensicherheit	Keine Kundenkonten oder Daten in SureCart erstellt
E-Mail-Verhinderung	Bestellbestaetigungs-E-Mails blockiert

Automatische Zahlungsmodus-Umschaltung

Funktioniert auch im Live-Modus

Wenn Ihr SureCart-Shop fuer Live-Zahlungen konfiguriert ist (Stripe, PayPal, etc.), schaltet Flowguard waehrend der Testlaeufe automatisch in den Test-/Sandbox-Modus um. Sie muessen den SureCart-Testmodus nicht manuell umschalten.

Das bedeutet:

• In der Flow-Editor-Vorschau: Zahlungsformulare verwenden den Sandbox-Modus
• Waehrend der Flow-Ausfuehrung: Stripe/PayPal verwenden Test-Zugangsdaten
• Fuer echte Kunden: Normale Live-Zahlungsverarbeitung (unveraendert)

Szenario	SureCart-Modus	Ergebnis
Flowguard-Test laeuft	Erzwungen auf Test	Sandbox-Zahlungen
Flow-Editor-Iframe	Erzwungen auf Test	Sandbox-Zahlungen
Normaler Kundenbesuch	Live (unveraendert)	Echte Zahlungen

Die automatische Umschaltung sorgt dafuer, dass Ihre Tests gleich funktionieren, egal ob Ihr Shop im Test- oder Live-Modus ist.

Wie es funktioniert

Shadow DOM Unterstuetzung

SureCart's Checkout-Formulare sind mit Web Components und Shadow DOM-Kapselung gebaut. Normale CSS-Selektoren koennen Elemente innerhalb von Shadow Roots nicht erreichen.

Flowguard behandelt das automatisch:

1. Selector Picker: Wenn Sie den Selector Picker im Flow Editor verwenden, erkennt und durchquert er automatisch Shadow-Grenzen
2. Test-Ausfuehrung: Playwright durchdringt Shadow DOM standardmaessig, sodass Ihre aufgezeichneten Selektoren funktionieren
3. Keine spezielle Syntax: Sie muessen keine besondere Selektor-Syntax verwenden - einfach zeigen und klicken

Shadow DOM ist fuer Sie unsichtbar

Sie muessen nichts ueber Shadow DOM wissen, wenn Sie Flowguard verwenden. Der Selector Picker und Test Runner behandeln es automatisch. Klicken Sie einfach auf Elemente und Flowguard findet sie.

API-Request-Handling

SureCart kommuniziert mit seinem Cloud-Backend ueber REST-API-Aufrufe. Flowguard verwaltet diese gezielt:

Erlaubte Requests (fuer normale Warenkorb/Checkout-Funktionalitaet):

• Erstellen und Aktualisieren von Checkouts
• Hinzufuegen/Entfernen von Positionen
• Abrufen von Produktinformationen
• Laden von Checkout-Formularen
• Validierung von Kundenadressen

Blockierte Requests (um echte Bestellungen zu verhindern):

• /v1/checkouts/{id}/finalize - Zahlungsverarbeitung
• /v1/checkouts/{id}/manually_pay - Manuelle Bestellerstellung
• WordPress REST API /confirm Endpunkt

Wenn diese Endpunkte blockiert werden, gibt Flowguard realistische Fake-Antworten zurueck, sodass der Checkout-Flow normal abzuschliessen scheint.

Test Mode einrichten

Test Mode aktivieren

1. Navigieren Sie zu Flowguard → Settings → Test Mode
2. Aktivieren Sie den Test Mode Schalter
3. Konfigurieren Sie die E-Mail-Behandlung (Blockieren oder Umleiten)
4. Speichern Sie die Einstellungen

SureCart-Erkennung ueberpruefen

Flowguard erkennt SureCart automatisch und wendet die passenden Schutzmassnahmen an. Sie koennen dies in den Test-Logs nach der Ausfuehrung eines Flows ueberpruefen - suchen Sie nach surecart-Eintraegen, die blockierte API-Aufrufe zeigen.

Test-Zahlungsprozessor in SureCart aktivieren

Erforderlich: Test Payment Prozessor aktivieren

Bevor Sie Checkout-Flows testen, muessen Sie den Test Payment Prozessor in SureCart aktivieren. Ohne ihn hat SureCart keine Sandbox-Zahlungsmethode und der Checkout zeigt Live-Zahlungsoptionen an.

So aktivieren Sie ihn:

1. Gehen Sie zu SureCart > Settings > Payment Processors
2. Finden Sie Test Payment und stellen Sie sicher, dass er aktiviert ist
3. Speichern Sie Ihre Einstellungen

Sobald aktiviert, zwingt Flowguard SureCart automatisch in den Testmodus waehrend Test-Runs und Flow-Editor-Vorschauen. Die Test Payment-Option erscheint im Checkout-Formular.

Fuegen Sie in Ihrem Flow einen Schritt hinzu, um die Test-Zahlungsmethode vor dem Absenden der Bestellung auszuwaehlen:

Click (Test Payment auswaehlen)
- Selector: sc-payment-method-choice[processor-id="mock"]

Das bewirkt:

• Keine echte Zahlungsverarbeitung
• Der Checkout schliesst mit einem simulierten Erfolg ab
• Ihr Flow testet die gesamte Checkout-Journey sicher

SureCart-Flows erstellen

Beispiel-Flow: Kompletter Checkout

1. Open Page
   - URL: https://ihreseite.de/products/ihr-produkt

2. Click (In den Warenkorb / Jetzt kaufen)
   - Selector: sc-product-buy-button

3. Wait
   - Time: 2000

4. Open Page
   - URL: https://ihreseite.de/checkout

5. Wait (Checkout laden)
   - Time: 2000

6. Type Text (E-Mail)
   - Selector: sc-checkout input[name="email"]
   - Value: test@example.com

7. Type Text (Vorname)
   - Selector: sc-checkout input[name="first_name"]
   - Value: Max

8. Type Text (Nachname)
   - Selector: sc-checkout input[name="last_name"]
   - Value: Mustermann

9. Click (Test Payment auswaehlen)
   - Selector: sc-payment-method-choice[processor-id="mock"]

10. Wait
    - Time: 500

11. Click (Bestellung absenden)
    - Selector: sc-checkout sc-order-submit

12. Wait (Verarbeitung)
    - Time: 3000

13. Check (Assert Erfolg)
    - Selector: sc-dialog
    - Expected: "Test checkout successful"

Erfolgs-Modal nach dem Checkout

Test-Checkout Erfolgs-Modal

Wenn der Checkout im Testmodus abgeschlossen wird, zeigt SureCart einen Modal-Dialog an (keine Weiterleitung zu einer Bestaetigungsseite). Das Modal enthaelt testspezifische Meldungen.

Erwarteter Modal-Inhalt:

Element	Text
Titel	"Test checkout successful!"
Nachricht	"This is a simulated test checkout, and no orders were processed. To perform a test order, please contact your store administrator"
Button	"Go to homepage"

Fuer Ihren Assert-Schritt verwenden Sie einen dieser Ansaetze:

# Option 1: Modal-Dialog pruefen
Check (Assert Erfolgs-Modal)
- Selector: sc-dialog
- Expected: "Test checkout successful"

# Option 2: Spezifischen Text pruefen
Check (Assert Erfolgstext)
- Selector: sc-dialog-header
- Expected: "Test checkout successful"

Wenn Ihre Assertion fehlschlaegt

Wenn Ihr Check-Schritt fehlschlaegt, schauen Sie sich den Screenshot in den Testergebnissen an. Der Screenshot zeigt genau, welcher Text auf dem Bildschirm erschien - verwenden Sie diesen Text in Ihrer Assertion. SureCart koennte den Modal-Text in zukuenftigen Versionen aendern.

Aufnahme-Tipps

1. Verwenden Sie den Selector Picker: Klicken Sie auf das Fadenkreuz-Symbol und klicken Sie auf SureCart-Elemente - Shadow DOM wird automatisch behandelt
2. Fuegen Sie Wait-Steps hinzu: SureCart laedt Inhalte dynamisch, fuegen Sie also Wartezeiten nach Navigation und vor Interaktionen hinzu
3. Testen Sie schrittweise: Bauen Sie Ihren Flow Schritt fuer Schritt auf und testen Sie jeden Schritt

Haeufige SureCart-Selektoren

SureCart verwendet benutzerdefinierte HTML-Elemente (Web Components). Hier sind typische Selektoren:

Produktseiten

• Kaufen-Button: sc-product-buy-button, sc-buy-button
• In den Warenkorb: sc-product-buy-button[type="add-to-cart"]
• Menge: sc-product-quantity input
• Preisanzeige: sc-product-price

Checkout-Formular

• E-Mail: sc-checkout input[name="email"]
• Namensfelder: sc-checkout input[name="first_name"], input[name="last_name"]
• Adresse: sc-checkout input[name="line_1"]
• Stadt: sc-checkout input[name="city"]
• Absenden-Button: sc-order-submit, sc-checkout-form-submit

Bestellbestaetigung

• Bestaetigungs-Container: sc-order-confirmation
• Bestellnummer: sc-order-confirmation .order-number

Selektoren koennen variieren

SureCart aktualisiert gelegentlich ihre Komponentenstruktur. Wenn ein Selektor nicht funktioniert, verwenden Sie den Selector Picker, um den aktuellen Selektor fuer Ihr Element zu finden.

Test-Szenarien

Gast-Checkout

1. Produkt zum Warenkorb hinzufuegen
2. Zum Checkout navigieren
3. Kundeninformationen ausfuellen
4. Bestellung absenden
5. Ueberpruefen, ob Bestaetigung erscheint

Im Test Mode scheint der Checkout abgeschlossen zu sein, aber es wird keine Bestellung in SureCart erstellt.

Gutschein-/Rabatt-Tests

1. Produkt zum Warenkorb hinzufuegen
2. Zum Checkout navigieren
3. Rabattcode eingeben
4. Ueberpruefen, ob Rabatt angewendet wird
5. Checkout abschliessen

Gutscheine werden normal validiert - Flowguard blockiert nur die finale Bestellerstellung.

Abo-Produkte

SureCart-Abo-Produkte funktionieren auf die gleiche Weise:

1. Abo-Produkt auswaehlen
2. Checkout-Formular ausfuellen
3. Bestellung absenden

Im Test Mode wird kein Abo erstellt, aber der Flow schliesst ab, als ob es so waere.

Was im Test Mode blockiert wird

SureCart API-Aufrufe

Blockiert:

• Checkout-Finalisierung (/finalize)
• Manuelle Zahlungsverarbeitung (/manually_pay)
• Bestellbestaetigung (/confirm)

Erlaubt:

• Checkout-Erstellung und -Aktualisierungen
• Positionen-Verwaltung
• Produkt-/Preis-Abruf
• Validierung von Kundeninformationen

WordPress-Operationen

Blockiert:

• Post-Erstellung (mit WordPress synchronisierte Bestellungen)
• Benutzer-Erstellung (Kundenkonten)
• E-Mail-Versand

Testergebnisse ueberpruefen

Nach dem Ausfuehren eines SureCart-Flows:

1. Gehen Sie zu Flowguard → Flows
2. Klicken Sie auf Ihren Flow
3. Sehen Sie sich den Test Logs Tab an

SureCart-spezifische Logs

Suchen Sie nach Eintraegen mit Typ surecart:

{
  "type": "surecart",
  "action": "blocked",
  "endpoint": "finalize",
  "checkout_id": "abc123...",
  "note": "SureCart checkout finalization blocked in test mode"
}

Dies bestaetigt, dass die Bestellung nicht erstellt wurde.

Best Practices

1. Immer Test Mode aktivieren

Kritisch

Fuehren Sie niemals SureCart-Checkout-Flows ohne Test Mode aus. Echte Bestellungen werden erstellt und Zahlungen verarbeitet!

2. Ausreichende Wartezeiten verwenden

SureCart laedt Inhalte dynamisch. Empfohlene Wartezeiten:

• Nach Seitennavigation: 2000ms
• Nach Klick auf Kaufen-Button: 1500ms
• Nach Formular-Absendung: 3000ms

3. Zuerst in der Vorschau testen

Verwenden Sie die Live-Vorschau des Flow Editors, um jeden Schritt zu ueberpruefen, bevor Sie den vollstaendigen Flow ausfuehren.

4. Test-Logs ueberwachen

Nach jedem Testlauf die Logs pruefen, um zu bestaetigen:

• [ ] SureCart API-Aufrufe wurden ordnungsgemaess blockiert
• [ ] Keine Bestellungen erscheinen im SureCart-Dashboard
• [ ] Checkout-Flow wurde visuell abgeschlossen

5. Beschreibende Step-Namen verwenden

Gut	Schlecht
"Click (Jetzt kaufen Button)"	"Click"
"Fill (Kunden-E-Mail)"	"Type"
"Wait (Checkout laedt)"	"Wait"

Kompatibilitaet

SureCart-Versionen

Flowguards SureCart-Integration ist kompatibel mit:

• SureCart 2.x und spaeter
• Allen SureCart-Checkout-Formulartypen
• Instant Checkout-Seiten
• Eingebetteten Checkout-Formularen

Zahlungsanbieter

Funktioniert mit allen SureCart-Zahlungsanbietern:

• Stripe
• PayPal
• Manuelle/Offline-Zahlungen

Alle Zahlungsverarbeitung wird im Test Mode blockiert, unabhaengig vom Anbieter.

Fehlerbehebung

Checkout zeigt Live-Zahlungsoptionen statt Testmodus

Symptom: Das Checkout-Formular zeigt Stripe/PayPal Live-Felder statt der Test Payment-Option.

Ursache: Der Test Payment Prozessor ist in SureCart nicht aktiviert.

Loesung:

1. Gehen Sie zu SureCart > Settings > Payment Processors
2. Aktivieren Sie Test Payment
3. Speichern und den Flow Editor neu laden

Flowguard zwingt SureCart automatisch in den Sandbox-Modus, aber SureCart braucht einen aktiven Test Payment Prozessor, damit die Sandbox-Option erscheint.

Selector Picker generiert falsche Selektoren fuer Checkout-Elemente

Symptom: Sie klicken auf ein Checkout-Element (z.B. den Test Payment Radio-Button) und der generierte Selektor funktioniert nicht oder zeigt auf das falsche Element. Typische fehlerhafte Selektoren sehen so aus: #sc-payment-0 >> span:nth-of-type(4).

Ursache: SureCart verwendet tief verschachteltes Shadow DOM (Web Components innerhalb von Web Components). Der Selector Picker zielt manchmal auf innere Shadow-Elemente statt auf die richtige Komponente.

Loesung: Geben Sie den Selektor manuell ein. SureCart-Komponenten haben beschreibende Attribute, die Sie direkt ansprechen koennen:

Element	Selektor
Test Payment Methode	sc-payment-method-choice[processor-id="mock"]
Vorname-Feld	sc-checkout input[name="first_name"]
Nachname-Feld	sc-checkout input[name="last_name"]
E-Mail-Feld	sc-checkout input[name="email"]
Absenden-Button	sc-checkout-form-submit

TIP

Playwright durchdringt Shadow DOM automatisch — Sie brauchen die >>-Syntax fuer die meisten SureCart-Elemente nicht. Einfache CSS-Selektoren wie sc-payment-method-choice[processor-id="mock"] funktionieren direkt.

Checkout-Finalisierung schlaegt fehl oder haengt

Symptom: Nach dem Klick auf den Absenden-Button wird der Checkout nicht abgeschlossen oder zeigt einen Fehler.

Ursache: Flowguard blockiert den /finalize-API-Aufruf und gibt eine simulierte Erfolgsantwort zurueck. Wenn SureCart's Frontend das Antwortformat nicht erkennt, kann es nicht fortfahren.

Loesung:

1. Fuegen Sie einen Warten-Step (2-3 Sekunden) nach dem Klick auf Absenden hinzu
2. Pruefen Sie die Test-Logs auf surecart-Eintraege — diese zeigen welche API-Aufrufe blockiert wurden
3. Stellen Sie sicher, dass Flowguards Test Mode in den Einstellungen aktiviert ist

Erfolgsseite laedt nach Checkout nicht

Symptom: Der Checkout scheint zu verarbeiten, aber die Weiterleitung zur Erfolgs-/Danke-Seite findet nicht statt.

Loesung:

1. Fuegen Sie einen Navigieren-Step nach dem Checkout-Absenden hinzu, um manuell zur erwarteten Erfolgsseite zu navigieren
2. Fuegen Sie einen Pruefen-Step hinzu, um zu verifizieren, dass Sie auf der richtigen Seite sind (z.B. URL enthaelt "thank-you")

Elemente werden waehrend der Testausfuehrung nicht gefunden

Symptom: Playwright meldet "Element not found" fuer SureCart-Checkout-Elemente, die im Browser sichtbar sind.

Ursache: SureCart laedt Checkout-Komponenten asynchron. Das Element existiert moeglicherweise noch nicht, wenn der Step ausgefuehrt wird.

Loesung:

1. Fuegen Sie einen Warten-Step (2000ms) vor der Interaktion mit Checkout-Elementen hinzu
2. Verwenden Sie stabile Selektoren basierend auf Element-Attributen (siehe Tabelle oben) statt der Selector Picker-Ausgabe
3. Stellen Sie sicher, dass Sie auf der Checkout-Seite sind, bevor Sie mit Checkout-Elementen interagieren

Verwandte Dokumentation

• Test Mode Guide
• WooCommerce Testing
• Flow Editor Guide
• Step Types Reference