session-demo
// Einführung

Was ist der Playground?

Ein realistischer Webshop, der als Übungswerkzeug für Software-Tester gebaut ist. Du kannst damit explorativ testen, Testautomation schreiben, APIs ausprobieren und gezielt Bugs suchen. Ohne Accounts, ohne Setup, ohne Risiko und anonym.

Online-Demo Docker lokal Self-Hosted
// Erste Schritte

Neu hier? So liest du diese Seite

Der Playground ist gross. Für den Einstieg reichen drei Dinge: der kurze Rundgang, die drei Arbeitsumgebungen und der Weg, einen Bug zu melden. Danach findest du dich selbst zurecht.

Dein Rundgang in 10 Minuten

Vier Schritte, vom Zuschauen bis zum ersten gefundenen Bug.

1

Die Simulation läuft bereits

Du musst nichts starten. Im Hintergrund erzeugt eine Live-Simulation laufend Bestellungen, Zahlungen und Lieferungen. Alles, was du siehst, sind echte Daten aus diesem System.

2

Sieh dir den Shop an

Öffne den Shop und stöbere durch die 150 Produkte. Lege etwas in den Warenkorb und durchlaufe den Checkout bis zur Bestätigung. So lernst du die Kundensicht kennen.

Zum Shop →
3

Wechsle die Perspektive ins Backoffice

Im Backoffice siehst du dieselben Bestellungen aus Sicht der Firma: Shop, Finanzen, Logistik, Post und Einkauf. Wähle eine Rolle und schau einer Abteilung bei der Arbeit zu.

Zum Backoffice →
4

Jage deinen ersten Bug im Element Garden

Der Element Garden ist der Übungsplatz mit 145 UI-Elementen. Aktiviere den Challenge-Modus, finde einen versteckten Fehler und melde ihn. Wie das geht, steht direkt unten.

Der Element Garden im Wiki Zum Element Garden →

Live System, Sandbox, Besucher-Session

Der Playground kennt drei Arbeitsumgebungen. Du wechselst sie über das Zahnrad-Icon im Header.

Sitzungen und Fortschritt im Wiki

Besucher-Session

Privat

Beim ersten Besuch bekommst du automatisch eine eigene Datenkopie. Alles, was du änderst, bleibt bei dir. Andere Besucher sehen nichts davon.

Live System

Geteilt

Die gemeinsame Demo mit laufender Simulation. Alle Besucher sehen dieselben Daten. Gut zum Beobachten, weniger geeignet für eigene Experimente.

Sandbox

Konfigurierbar

Deine editierbare Spielwiese. Hier aktivierst du Bug-Modi, konfigurierst das System und speicherst Testszenarien. Dafür brauchst du eine Registrierung mit Session-Code.

Fehler gefunden? So meldest du ihn

Der Playground hat zwei getrennte Übungswelten — und jede meldet Fehler auf ihre eigene Art. Wichtig zu wissen, damit nichts durcheinandergeht:

Fehler finden und melden im Wiki
Fehler-melden-Knopf unten rechts im Shop
E2E-System · auf der Seite

„Fehler melden“-Knopf

Wo: unten rechts auf jeder E2E-Seite (Shop, Kasse, Backoffice). Warum: du meldest direkt dort, wo du gerade testest.

Melde-Bereich in der Tool-Box
E2E-System · zentral

In der Tool-Box

Wo: Tool-Box → „Fehler melden und Fund-Stand“. Warum: alle neun Fehlerarten und dein Fund-Stand auf einen Blick.

Rote Bug-Sterne bei einem Element im Element Garden
Element Garden · eigenes System

Rote Sterne + Quiz

Die roten -Sterne bei einem Element anklicken → ein Bug wird eingebaut → finde ihn → Option/Alt + Klick aufs Element → im Quiz die richtige Fehlerart wählen. Warum: der Übungsplatz hat sein eigenes, spielerisches Melde-System.

Die neun E2E-Fehlerarten Schritt für Schritt mit je einem Beispiel stehen im Fehler-Tutorial weiter unten. Deinen Fund-Stand und dein Level siehst du unter Session & Fortschritt. Sichere deinen Session-Code, dann bleibt der Fortschritt erhalten.

🔑 Session & Fortschritt

Der Playground verwendet Session-Codes statt Accounts. Wenn du dich registrierst, erhältst du einen verschlüsselten Code (z.B. SwissTD.eNp...), der deinen gesamten Fortschritt enthält — gefundene Bugs, erledigte Tests, abgeschlossene Workflows und dein Level. Sichere diesen Code (kopieren oder als .swisstd-Datei herunterladen), um später nahtlos weiterzumachen. Kein Passwort, kein Account, keine Datenbank — alles steckt im Code.

🐞
1. Registrieren Name + E-Mail eingeben — sofort loslegen

Der Playground erstellt eine anonyme Session — es werden keine Accounts angelegt und keine Daten auf einem Server gespeichert.

Was passiert mit deinen Daten?
Name und E-Mail werden ausschliesslich in deinen Session-Code eingebettet. Der Code wird lokal im Browser (localStorage) gespeichert und nie an einen Server gesendet.

Verschlüsselung:
Dein Fortschritt wird als JSON komprimiert (Deflate), Base64url-kodiert und mit einem HMAC-SHA256-Signatur versehen. Format: SwissTD.{payload}.{signature}

Kein Tracking, keine Cookies, keine Analytics. Alles bleibt in deinem Browser.

📋
2. Code sichern Session-Code kopieren oder als .swisstd-Datei herunterladen

Nach der Registrierung generiert der Browser einen Session-Code — ein komprimierter, signierter String, der deinen kompletten Spielstand enthält:

  • • Gefundene Bugs + Schwierigkeitsstufe
  • • Erledigte Tests pro Element
  • • Abgeschlossene Workflows
  • • Freigeschaltetes Level + Score
  • • Name, E-Mail, Session-ID

Token-Aufbau:
SwissTD.{Deflate+Base64url}.{HMAC-SHA256}
Die Signatur schützt vor Manipulation — geänderte Codes werden beim Laden abgelehnt.

Kein Backup auf dem Server. Geht der Code verloren, ist der Fortschritt unwiederbringlich weg.

📋 Zwischenablage

Klicke auf Code kopieren und speichere den Text in einem Passwort-Manager, einer Notiz oder einer Datei deiner Wahl.

💾 .swisstd-Datei

Lädt eine kleine Textdatei herunter (swisstd-challenge-{id}.swisstd), die du später direkt hochladen kannst.

📱 Browser-Speicher

Der Code wird automatisch im localStorage gespeichert. Solange du den Browser-Cache nicht löschst, bleibt dein Fortschritt erhalten.

🔄
3. Weitermachen Code eingeben oder .swisstd-Datei hochladen

Wenn du deinen Session-Code gesichert hast, kannst du jederzeit von jedem Gerät weitermachen — der Code enthält alles.

Was wird wiederhergestellt?

  • • Alle gefundenen Bugs + Punkte
  • • Erledigte Tests im Element Garden
  • • Abgeschlossene Workflows
  • • Freigeschaltetes Level
  • • Dein Name und E-Mail

Validierung:
Beim Laden wird die HMAC-SHA256-Signatur geprüft. Manipulierte oder unvollständige Codes werden abgelehnt.

Zwei Wege: Code direkt einfügen (z.B. aus Passwort-Manager) oder eine zuvor heruntergeladene .swisstd-Datei hochladen.

oder

Fortschritt

Dein Fortschritt ist vollständig in deinem Session-Code gespeichert — einem verschlüsselten String, der alle gefundenen Bugs, erledigten Tests, abgeschlossenen Workflows und dein Level enthält. Es gibt keine Server-Datenbank und kein Passwort: der Code ist dein Spielstand. Sichere ihn jederzeit über Code kopieren (Zwischenablage) oder als .swisstd-Datei herunterladen. Um später weiterzumachen, gib den Code einfach im Challenge-Bereich ein oder lade die Datei hoch. Achtung: Geht der Code verloren, gibt es keine Möglichkeit den Fortschritt wiederherzustellen — es existiert keine serverseitige Kopie.

★★★

Tests

Tests
Punkte
★★★

Bugs

Gefunden
Punkte
Gesamt-Score
Level ·
/
Leaderboard Coming soon
Session:

Was du damit machen kannst

1

Einen Webshop erkunden

Stöbere durch einen Katalog mit 150 Produkten in 6 Kategorien, von Elektronik bis Lebensmittel. Filtere, sortiere, nutze die Suche. Jede Produktseite zeigt Bilder, Lagerbestand und Kundenbewertungen.

Der Shop im Wiki
2

Einen Kauf abschliessen

Leg Produkte in den Warenkorb, löse Gutscheincodes ein und durchlaufe den 4-Schritt-Checkout: Adresse → Versand → Zahlung → Bestätigung. MwSt (8.1%), 4 Zahlungsarten, Schweizer PLZ-Validierung.

Der Bestellprozess im Wiki
3

Das Backoffice steuern

5 Abteilungen in der Schaltzentrale: Shop, Logistik, Finanzen, Post und Einkauf. 20 Rollen mit rollenbasierter Zugriffskontrolle (RBAC), eine Subway Map mit 6 Geschäftsprozessen und 40 Stationen, KPI-Dashboards und Event-driven Statuswechsel über alle Services.

Rollen und Abteilungen im Wiki
4

REST APIs ansprechen

Über 240 Endpoints für Produkte, Bestellungen, Zahlungen und Testdaten. Dokumentiert in Swagger UI mit OpenAPI-Spec. Direkt im Browser, via Postman oder curl.

Technik und Schnittstellen im Wiki
5

Bugs jagen

188 Element-Garden-Bugs + bis zu 726 Data-Bugs (bei Edge-Case Seed) in 18 Kategorien: visuelle Defekte, kaputte Validierungen, langsame Responses, Accessibility-Probleme, Daten-Grenzwerte. Per URL-Parameter oder Settings ein- und ausschaltbar.

Das Fehler-System im Wiki
6

Datenbank inspizieren

PostgreSQL mit 6 Datenbanken, erreichbar über Adminer oder JDBC. Testdaten seeden, injizieren und zurücksetzen, alles per API. CSV-Import/Export für eigene Testdatensätze.

System und Architektur im Wiki
// Bug Challenge

Bug Challenge

Auf dieser Website sind 188 Element-Garden-Bugs + 726 Data-Bugs versteckt — in UI-Elementen, Formularen, dem Online-Shop und den Backoffice-Systemen. Finde so viele wie möglich und sammle Punkte!

4 Challenge-Dimensionen

Punkte sammeln in vier unabhängigen Bereichen.

★★★
Element Garden — Test-Variationen

145 UI-Elemente mit je 3–9 TCD-Testfällen (656 total). Führe gültige und ungültige Eingaben in der interaktiven Demo aus. Erledigte Tests werden live markiert. Punkte basieren auf der Element-Schwierigkeit (1–3 Sterne).

★★★
Element Garden — Bug-Hunting

188 Element-Garden-Bugs + 726 Data-Bugs (bei Edge-Case Seed) in 3 Schwierigkeitsstufen. Finde Bugs beim Browsen (Daten-Fehler) oder beim Eingeben (Validierungs-Lücken) und identifiziere sie im Alt+Click Quiz. Stufen schalten sich progressiv frei (70% → nächstes Level).

Workflows — Geschäftsprozesse

31 realistische Retailer-Workflows in 3 Stufen: Einzelmasken (10), Abteilungs-Flows (8), End-to-End Cross-Department (13). Arbeite jeden Workflow durch und schliesse ihn ab. Punkte: Stufe 1 = 1 Pt, Stufe 2 = 2 Pt, Stufe 3 = 3 Pt.

System — API Bug-Injections

9 Injection-Bugs auf Service-Ebene: Visual Defects, Slow Responses, Flaky Errors, Broken Data, Missing Validation, Accessibility Bugs, Information Disclosure, Gateway Timeout, Data Desync. Aktivierbar in der Toolbox — betrifft alle API-Antworten gleichzeitig.

Die neun Bug-Modi

Das E2E-System kann neun Arten von Fehlern einbauen — im Shop, in der Kasse und im Backoffice (nicht im Element Garden). Einzeln oder kombiniert.

Alle Fehlerarten im Wiki

Aktivierung: In der Tool-Box unter „Aktive Bug-Modi“ die gewünschte Art einschalten (mehrere gleichzeitig möglich), dann die Testseite neu laden.

Beweis statt Raten: Jeden Fund weist du nach — der Server prüft deinen Beleg gegen den echt eingebauten Fehler. Die Melde-Maske zeigt immer alle neun Arten und verrät nie, welche gerade aktiv ist (Köder-Prinzip).

visual · verschobene/verzerrte Elemente im Shop
slow · Antworten dauern 2–5 Sekunden
broken · falsche Währung (EUR statt CHF), Warenkorb-Knopf reagiert nicht
validation · fehlende Prüfung: negative/0-Beträge werden ausgeliefert
flaky · nur manchmal: ~30 % der Aktionen schlagen fehl
a11y · Bilder/Bedienelemente verlieren ihre Beschriftung
security · Antwort-Kopfzeilen legen interne Daten offen
timeout · Anfrage hängt ~35 s und bricht mit 504 ab
desync · Status-/Tracking-Anzeige hinkt einen Schritt hinterher

Und wie findest du sie? Wie du jede einzelne Art auslöst, erkennst und meldest — Schritt für Schritt mit je einem geschenkten Beispiel — steht direkt darunter im Fehler-Tutorial.

Fehler-Tutorial: So findest du jede Fehlerart

Die neun Fehlerarten des E2E-Systems — jede einmal mit einem geschenkten Beispiel Schritt für Schritt. (Betrifft Shop, Kasse und Backoffice, nicht den Element Garden.)

Das Tutorial liess sich nicht laden. Im Wiki öffnen.

Dieselbe Anleitung mit Suchfunktion im Wiki → Testobjekt → Bug-Tutorial.

// Test Challenges

Test Challenges

Im Element Garden üben →

18 Kategorien mit 145 UI-Elementen decken die häufigsten Herausforderungen in der Testautomatisierung ab. Jede Kategorie existiert im Element Garden als übbarer Bereich, inklusive Locator-Hints und Schwierigkeitsstufen.

18 Kategorien 145 Elemente 188 injizierbare Bugs 3 Schwierigkeitsstufen
Zum Element Garden →
// Architektur

Die vier Systeme

Der Playground simuliert ein reales E-Commerce-Ökosystem aus vier zusammenhängenden Bereichen. Jeder Bereich hat eigene Seiten, APIs und Daten und lässt sich einzeln oder End-to-End testen.

Alle Abteilungen im Wiki
System 1

Shop

Der SwissTD Shop ist der Webshop eines Schweizer Online-Retailers mit 150 Produkten. Produkte stöbern, vergleichen und in den Warenkorb legen.

  • 150 Produkte in 6 Kategorien
  • Produktdetail mit Lagerbestand
  • Suche, Filter, Sortierung
  • Merkliste & Produktvergleich
  • Bewertungen & Cross-Selling
System 2

Finanzen

Preisberechnung, MwSt (8.1%), Gutscheincodes und Zahlungsabwicklung. 4 Zahlungsmethoden im 4-Schritt-Checkout.

  • MwSt-Berechnung (8.1% CHF)
  • Gutschein-/Rabattcodes
  • Rechnung, Kreditkarte, TWINT, PayPal
  • Mahnwesen & Zahlungsverfolgung
  • Dynamische Preiskonfiguration
System 3

Logistik

Versandoptionen, Liefersimulation und Adressvalidierung. Drei Versandarten mit unterschiedlichen Zeiten und Kosten.

  • A-Post Standard (CHF 9.90, 2–3 Tage)
  • Express (CHF 19.90, nächster Werktag)
  • Click & Collect (gratis, am Swiss Testing Day)
  • PLZ-Validierung (CH, DE, AT, LI, FR, IT)
  • Adressformular mit Länderauswahl
System 4

Post & Zustellung

Zustellung, Sendungsverfolgung und Retouren-Abwicklung. Event-driven Statusübergänge vom Versand bis zur Auslieferung.

  • Sendungsverfolgung (Live-Status)
  • 3 Versandarten (A-Post, Express, Click & Collect)
  • Fehlgeschlagene Zustellungen
  • Retouren-Abholung & Rücksendungen
  • Benachrichtigungen (Versand, Zustellung)

E2E Kaufprozess: von der Suche bis zur Bestätigung

Katalog Produkt Warenkorb Adresse Versand Zahlung Übersicht Bestätigung ✓

Jeder Schritt ist auf UI-, API- und DB-Ebene einzeln testbar. POST /api/v1/shop/orders schliesst den Kauf ab.

Prozesse und Abläufe im Wiki

🔍 Bug-Verdacht

Element:

Seite:

Was stimmt an diesem Element nicht?

Nicht ganz — Versuch(e) verbleibend

Bug gefunden!

+ Punkte

Richtig!

Hier ist tatsächlich kein Bug. Gut beobachtet!

Aufgelöst

Die richtige Antwort ist grün markiert.

🧪

Willkommen im Sandbox-Modus!

Im Sandbox-Modus hast du die volle Kontrolle über das Testsystem:

🐞
Bugs aktivieren
188 fest eingebaute Fehler im Element Garden, dazu weitere im ganzen System.
⚙️
System konfigurieren
API, Services, Datenbanken und Backoffice-Einstellungen anpassen.
💾
Konfigurationen speichern
Erstelle verschiedene Testszenarien und wechsle schnell zwischen ihnen.
🎯
Challenge starten
Finde alle Bugs und verfolge deinen Fortschritt!

Das Live System bleibt davon unberührt — du kannst jederzeit zurückwechseln.