SureCart Testing Guide

Diese Anleitung erklaert, wie Sie SureCart-Checkout-Flows mit Flowguard sicher testen koennen, 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 aufgrund seiner modernen Architektur besondere Herausforderungen fuer automatisierte Tests dar. Flowguard wurde speziell entwickelt, um diese Herausforderungen nahtlos zu bewaeltigen.

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	Intelligente 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, bietet Flowguard umfassenden Schutz:

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

Diese automatische Umschaltung stellt sicher, dass Ihre Tests identisch funktionieren, unabhaengig davon, ob Ihr Shop im Test- oder Live-Modus ist, ohne manuelle Konfiguration.

Wie es funktioniert

Shadow DOM Unterstuetzung

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

Flowguard handhabt dies 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 nahtlos funktionieren
3. Keine spezielle Syntax: Sie muessen keine spezielle Selektor-Syntax verwenden - einfach zeigen und klicken

Shadow DOM ist fuer Sie unsichtbar

Sie muessen nichts ueber Shadow DOM wissen oder sich darum kuemmern, wenn Sie Flowguard verwenden. Der Selector Picker und Test Runner handhaben 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 intelligent:

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 entsprechende 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-Zahlungsanbieter auswaehlen

Wichtig: Test-Zahlungsanbieter verwenden

Beim Erstellen Ihrer Test-Flows muessen Sie den Test Payment-Anbieter im Checkout auswaehlen. Flowguard zwingt SureCart in den Testmodus, wodurch die Test Payment-Option verfuegbar wird, auch wenn Ihr Shop fuer Live-Zahlungen konfiguriert ist.

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="test"]

Dies stellt sicher:

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

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="test"]

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.

Fehlerbehebung

Elemente nicht gefunden

Problem: Flow findet SureCart-Elemente nicht

Loesungen:

1. Fuegen Sie einen Wait-Step vor der Interaktion hinzu (SureCart laedt dynamisch)
2. Verwenden Sie den Selector Picker, um den aktuellen Selektor zu erhalten
3. Pruefen Sie, ob SureCart ihre Komponentenstruktur aktualisiert hat

Checkout haengt bei "Submitting"

Problem: Checkout scheint nach dem Klicken auf Absenden festzuhaengen

Loesungen:

1. Ueberpruefen Sie, ob Test Mode aktiviert ist
2. Pruefen Sie Test-Logs auf blockierte API-Aufrufe
3. Stellen Sie sicher, dass Ihr Flow ausreichende Wartezeiten hat

Warenkorb leer nach Navigation

Problem: Warenkorb leert sich beim Navigieren zwischen Seiten

Loesungen:

1. Ueberpruefen Sie, ob das Preview-Token aktiv ist (Flow Editor sollte das Token anzeigen)
2. Fuegen Sie Wait-Steps zwischen Seitennavigationen hinzu
3. Pruefen Sie die Browser-Konsole auf Fehler

Flow funktioniert in der Vorschau, aber nicht bei der Ausfuehrung

Problem: Flow ist in der Editor-Vorschau erfolgreich, schlaegt aber bei der Ausfuehrung fehl

Loesungen:

1. Stellen Sie sicher, dass alle Wartezeiten ausreichend sind
2. Pruefen Sie, ob Selektoren nicht vom angemeldeten Benutzerstatus abhaengen
3. Ueberpruefen Sie die Ausfuehrungs-Screenshots, um zu sehen, was tatsaechlich auf dem Bildschirm ist

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.

Verwandte Dokumentation

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