// Element Garden

The Element Garden

UI-Elemente in Kategorien — jedes mit interaktivem Workflow, TCD-Testfällen, Locators (Playwright + Cypress) und Bug-Hunting Quiz.

Elemente

Kategorien

Tests

Bugs

Punkte

★★★

Test-Variationen

656 Testfälle · 145 Elemente · 3 Stufen

Die gelben Sterne zeigen die Test-Schwierigkeit (1–3). Unter «Mögliche Variationen» sind gültige und ungültige Testfälle aufgelistet — mit Schritten, erwartetem Ergebnis und was geprüft wird. Führe sie in der Demo aus: erledigte Tests werden live von grau zu grün/rot markiert.

★★★

Bug-Hunting

188 Bugs · 3 Schwierigkeitsstufen

Die roten Sterne zeigen die Bug-Schwierigkeit. Klicke darauf — ein Bug wird automatisch eingebaut. Finde den Fehler und bestätige ihn per Option+Klick im Quiz (4 Antworten). Richtig = Punkte + nächster Bug. Bug-Stufen schalten sich progressiv frei — erst Stufe 1 lösen, dann wird Stufe 2 freigeschaltet.

So funktioniert der Element Garden

Schritt für Schritt — vom Auswählen bis zum Bug-Hunting.

1. Kategorie und Element auswählen

In der Sidebar links siehst du 18 Kategorien (Eingabefelder, Buttons, Dialoge, etc.). Klicke auf eine Kategorie — sie klappt auf und zeigt alle Elemente dieser Kategorie. Klicke auf ein Element, um die Detail-Ansicht zu öffnen.

2. Die interaktive Demo ausprobieren

Jedes Element hat eine interaktive Demo — eine kleine Geschichte, die dir sagt was du tun sollst. Zum Beispiel: «Bestellung — Akzeptieren Sie die AGB um die Bestellung abzuschliessen.» Du siehst das Element (z.B. eine Checkbox), einen Zurücksetzen-Button und einen Absenden-Button. Darunter bekommst du Erfolgs- oder Fehlermeldungen je nach deiner Eingabe.

3. ★ Gelbe Sterne — Test-Variationen durchführen

Oben rechts siehst du gelbe Sterne (1–3) — das ist die Test-Schwierigkeit. Klicke darauf und öffne «Mögliche Variationen». Dort sind alle Testfälle aufgelistet: gültige Eingaben (links, grün) und ungültige Eingaben (rechts, rot). Jeder Testfall zeigt dir die Schritte, das erwartete Ergebnis und was er prüft.

Sobald du einen Testfall in der Demo oben ausführst, wird er automatisch als erledigt markiert (von grau zu grün/rot). So siehst du immer, welche Tests du schon gemacht hast und welche noch offen sind.

4. ★ Rote Sterne — Bug-Hunting

Neben den gelben Sternen siehst du rote Sterne — das ist die Bug-Schwierigkeit. Sobald alle Test-Variationen abgeschlossen sind, wird der Bug-Modus freigeschaltet. Klicke auf die roten Sterne — ein Bug wird automatisch eingebaut.

Beobachte das Element: irgendetwas stimmt nicht. Klicke mit Option+Klick (Alt+Klick) auf das verdächtige Element und identifiziere den Fehler im Quiz (4 Antworten). Richtige Antworten geben Punkte — danach wird automatisch der nächste Bug eingebaut.

Bug-Stufen schalten sich progressiv frei: Erst wenn du alle Stufe-1-Bugs eines Elements gelöst hast, wird Stufe 2 freigeschaltet. Wenn alle Bugs gefunden sind, kannst du im Bug-Katalog einzelne Bugs frei injizieren und erkunden.

5. Locators kopieren

Unter den Variationen findest du «Locators & Code». Dort steht fertiger Playwright- und Cypress-Code den du direkt in deine Tests kopieren kannst. Jedes Element hat eindeutige data-testid-Attribute.

Typ

Pflichtfeld

Max. Länge

Min. Länge

Minimum

Maximum

★★★ Alle Test-Variationen abschliessen um Bug-Hunting freizuschalten

State:

Weiterleitung zum Anbieter…

SwissTD App möchte auf Ihr Konto zugreifen

Scopes: openid, profile, email

✓ Anmeldung erfolgreich

State validiert:

✗ Zugriff verweigert durch Benutzer.

✗ State-Parameter manipuliert — CSRF-Schutz greift.

⚠ Session abgelaufen — bitte erneut anmelden.

Registrierung — Mock CAPTCHA: Challenge lösen, dann verifizieren.

Ich bin kein Roboter

Was ist + ?

✓ Verifizierung bestanden!

✗ Bitte Captcha lösen

⚠ Captcha abgelaufen, bitte erneut lösen

✗ Falsche Antwort — bitte erneut versuchen

2FA — 6-stelligen TOTP-Code eingeben. Lockout nach 3 Fehlversuchen.

Aktueller Code:

Verbleibend:

Fehlversuche: /3

✓ Code korrekt! 2FA bestanden.

✗ Falscher Code.

✗ Code muss 6 Stellen haben.

⚠ Code abgelaufen.

🔒 Zu viele Fehlversuche — gesperrt.

✗ Nur Ziffern erlaubt.

Formular — ARIA Labels und Rollen prüfen.

Dieser Button demonstriert verschiedene ARIA-Attribute.

ARIA Attribute dieses Buttons:

role=button, aria-label, aria-describedby, aria-expanded, aria-controls

Zustand:

✓ role=button vorhanden

✓ aria-label vorhanden

✗ Element ohne role — Violation

✗ div mit role=button ohne Keyboard-Support — Violation

Warenkorb — Live Region (aria-live) für Statusupdates.

Noch keine Nachrichten.

Aktuell:

Modal — Focus Management (Focus Trap). Tab durch Modal, Fokus bleibt drin.

Letzter Fokus:

Navigation — Skip-to-Content Link. Tab zum Anzeigen, Klick zum Springen.

Nav-Link 1 Nav-Link 2 Nav-Link 3

Hauptinhalt — Ziel des Skip-Links.

✓ Fokus auf Hauptinhalt verschoben

✗ Kein Skip-Link vorhanden — WCAG 2.4.1 Violation

Design — Kontrastprüfung. Normal Text und Large Text mit Kontrastverhältnissen.

Normal Text (14px)

Kontrast: 10.5:1 — WCAG AA ≥4.5:1 ✓

Large Text (18px bold)

Kontrast: 10.5:1 — WCAG AA ≥3:1 ✓

Schlechter Kontrast

Kontrast: 1.6:1 — WCAG AA FAIL ✗

✓ Normal Text: 10.5:1 ≥ 4.5:1 — bestanden

✓ Large Text: 10.5:1 ≥ 3:1 — bestanden

✗ Low Contrast: 1.6:1 < 4.5:1 — FAIL

Formular — Screen Reader Only Text. Visuell versteckt, aber für SR vorhanden.

Sichtbarer Text: Warenkorb (3)

✓ sr-only Text wird von Screen Reader gelesen

✓ Visuell versteckt via clip-Technik

✗ display:none — SR ignoriert den Text!

Menü — Vollständige Tastaturnavigation: Tab, Enter, Escape, Pfeiltasten.

↑ ↓ navigieren, Enter/Space auswählen, Esc abbrechen.

Ausgewählt:

✗ Keyboard Trap — Nutzer kann Widget nicht verlassen

✗ Custom div-Button ohne tabindex — nicht erreichbar

Formular — Standard Submit-Button mit Doppelklick-Schutz.

✓ Gesendet!

Formular — Reset-Button leert alle Felder (mit Bestätigung).

✓ Felder zurückgesetzt

⚠ Zurücksetzen abgebrochen

Navigation — Link der wie ein Button aussieht (Zur Bestellübersicht).

Zur Bestellübersicht →

href: /bestelluebersicht • target: _self • role: link

✓ Navigation ausgelöst

Aktionen — Papierkorb-Icon zum Löschen (braucht aria-label für Screen Reader).

Löschen

✓ Gelöscht!

Bestellung — Button mit Ladezustand (wird disabled + Spinner während Verarbeitung).

Zeitüberschreitung simulieren

✓ Fertig!

Produktfilter — Nur verfügbare Artikel anzeigen (Toggle An/Aus).

Bestellung — Speichern (Hauptaktion) oder Speichern & Senden (Dropdown).

✓

Ansicht — Liste / Grid / Kompakt umschalten (exklusive Auswahl).

Gewählt:

Konto — Konto unwiderruflich löschen (Bestätigungs-Dialog).

Konto wirklich löschen?

Diese Aktion kann nicht rückgängig gemacht werden.

✓ Konto gelöscht!

Schnellaktion — Schwebender Button zum Erstellen einer neuen Bestellung.

Neue Bestellungen:

Reklamation — Laden Sie ein Foto des beschädigten Artikels hoch.

Dokument

✓ Reklamation eingereicht!

✗

Reklamation — Laden Sie bis zu 5 Fotos des beschädigten Artikels hoch.

Fotos auswählen (max. 5)

✓ Reklamation mit Datei(en) eingereicht!

✗

Dokumente — Datei in den Bereich ziehen oder klicken zum Auswählen.

🗁 Dateien hierher ziehen oder klicken

✓ Dokument «» hochgeladen!

✗

Profil — Profilbild hochladen mit Vorschau.

Profilbild auswählen

✓ Profilbild gespeichert!

✗

Bestellung — Rechnung als PDF herunterladen.

⬇ beispiel.pdf herunterladen

Lieferung — Wählen Sie Ihr gewünschtes Lieferdatum.

Lieferdatum

✓ Liefertermin bestätigt!

✗

Terminbuchung — Wählen Sie Ihre Wunsch-Uhrzeit für das Beratungsgespräch (08:00–18:00).

Uhrzeit

✓ Termin erfolgreich gebucht!

✗

Finanzbericht — Wählen Sie den Abrechnungsmonat (ab Januar 2024).

Abrechnungsmonat

✓ Finanzbericht wird geladen!

✗

Lieferplanung — Wählen Sie die Lieferwoche für Ihre Grossbestellung.

Kalenderwoche

✓ Lieferwoche bestätigt!

✗

Terminbuchung — Datum und Uhrzeit für Ihren Beratungstermin wählen (01.01.2024 08:00 – 31.12.2030 18:00).

Termin

✓ Termin erfolgreich gebucht!

✗

Lieferung — Gewünschtes Lieferdatum im Kalender wählen.

Lieferdatum

✓ Liefertermin bestätigt!

✗

Auswertung — Zeitraum für den Verkaufsbericht wählen (Start- und Enddatum).

Von

Bis

✓ Verkaufsbericht wird erstellt!

✗

Buchung — Anreisedatum für Ihre Hotelreservierung wählen.

MoDiMiDoFrSaSo

Ausgewählt:

✓ Hotelreservierung bestätigt!

✗

Produktdetails — Öffnen Sie das Modal um Produktinformationen anzuzeigen. Schliessen per Button, Backdrop oder ESC.

Focus-Trap aktiv

Statusmeldungen — Zeigen Sie Erfolg-, Fehler-, Warn- oder Info-Alerts an. Jeder Alert kann geschlossen werden.

Bestellung stornieren — Bestätigungs-Dialog mit Ja/Nein und ESC-Unterstützung.

Gutscheincode eingeben — Prompt-Dialog mit Eingabefeld, OK und Abbrechen.

Gutschein eingelöst!

Benachrichtigung — Toast erscheint oben rechts und verschwindet nach 3 Sekunden. Manuell schliessbar.

Aktive Toasts:

Hilfe — Bewegen Sie die Maus über das Fragezeichen-Icon für einen Info-Tooltip.

Lieferzeit

Tooltip sichtbar:

Filter — Popover mit Filteroptionen bei Klick. Click-outside schliesst das Popover.

Filteroptionen

Nur verfügbare Limitierte Auflagen Preis unter CHF 1000

Popover offen:

Warenkorb — Badge mit Zähler. Erhöhen und verringern Sie die Anzahl. Überlauf bei 99+.

Aktueller Stand:

Prioritäten — Aufgaben per Drag & Drop neu ordnen.

Reihenfolge:

Projektmanagement — Karten zwischen Spalten verschieben (Todo / In Progress / Done).

Todo: | In Progress: | Done:

Import — Datei in den Bereich ziehen zum Importieren (.pdf, .jpg, .png, max 10 MB).

Dateien hierher ziehen

✗

✓ Datei erfolgreich importiert.

Bildbearbeitung — Helligkeit per Drag verschieben (0–100).

Helligkeit: %

050100

Layout — Panel-Breite per Drag anpassen (100–800 px).

Panel (px)

Ziehen Sie den Griff →

⋮

Produktliste — Daten vom Server laden (simuliert).

Laden…

—

✗ Netzwerkfehler — Daten konnten nicht geladen werden.

Produktkatalog — Weitere Produkte beim Scrollen laden.

Weitere laden…

Alle Produkte geladen.

Einträge geladen

Bildgalerie — Bilder werden erst geladen wenn sie im Viewport sind.

/ 4 Bilder geladen

Kundensuche — Live-Suche mit Debounce (300ms).

Keine Ergebnisse
Bitte min. 2 Zeichen eingeben…

Flash-Sale — Countdown-Timer bis zum Angebotsende.

Abgelaufen!

Bestellstatus — Automatische Aktualisierung alle 3 Sekunden.

Bestellnummer: #2024-0815

Live

Dashboard — Skeleton-Loader während Daten laden.

Dashboard — Übersicht

128

Bestellungen

CHF 47'320

Umsatz

94%

Zufriedenheit

Letzte Aktualisierung: gerade eben

✗ Daten konnten nicht geladen werden. Bitte erneut versuchen.

Klicke «Dashboard laden» um die Skeleton-Animation zu sehen.

Produktbeschreibung — «Mehr anzeigen / Weniger anzeigen» Toggle.

Die Sternennacht ist eines der bekanntesten Gemälde von Vincent van Gogh. Es wurde im Juni 1889 gemalt und zeigt den Blick aus dem Fenster seines Zimmers in der Heilanstalt Saint-Rémy-de-Provence. Das Gemälde zeigt eine wirbelnde Nachtlandschaft mit einem leuchtenden Halbmond und Sternen.

Produktkatalog — Virtuelle Liste mit 10 000 Einträgen. Nur sichtbare Zeilen gerendert.

Zeigt ~ von Items (virtualisiert)

Live-Chat — WebSocket-Simulation. Nachrichten senden/empfangen. Reconnect bei Verbindungsabbruch.

Keine Nachrichten. Verbinde und sende eine Nachricht.

DOM-Update — Element wird nach Klick im DOM ersetzt. Zweiter Klick auf das neue Element muss funktionieren.

Ziel-Element (Original)

Klick ersetzt das DOM-Element durch eine neue Instanz. Die alte Referenz wird "stale".

✓

Autovervollständigung — Eingabe mit 300ms Debounce. Zeigt «Suche...» während Debounce, dann Ergebnisse.

Produkthighlight — CSS-Animation auf Knopfdruck. Fade-In/Out Toggle. Tester muss warten bis Animation abgeschlossen.

Produkthighlight: Exklusives Sonderangebot!

✓ Animation abgeschlossen

Animation läuft...

Kundenprofil — Geben Sie Ihren Vornamen ein.

Vorname

✓ Vorname gespeichert!

✗

Newsletter — E-Mail für SwissTD Newsletter eingeben.

E-Mail

✓ Newsletter abonniert!

✗

Konto-Sicherheit — Setzen Sie ein neues Passwort.

Passwort

✓ Passwort gespeichert!

✗

Kundenprofil — Telefonnummer mit Landesvorwahl eingeben.

Land

Telefon

✓ Kontakt gespeichert!

✗

Firmenprofil — Website-URL mit Live-Vorschau eingeben.

Website

Vorschau:

✓ Profil gespeichert!

✗

Shop — Schnellsuche mit Live-Filter.

Suche

Warenkorb — Anzahl Taschenmesser eingeben.

Menge

✓ Artikel hinzugefügt!

✗

Kontaktformular — Nachricht mit Zeichenzähler eingeben.

Nachricht

✓ Nachricht gesendet!

✗

DevTools-Challenge — Finde das versteckte Token im DOM und gib es ein.

Tipp: Inspiziere den Quellcode dieser Karte (DevTools → Elements).

Token eingeben

✓ Token korrekt — Challenge bestanden!

✗

Bestellhistorie — Readonly Bestellnummer und deaktivierter Status.

Bestellnummer

Status

Bestelldaten

Bestellnr: KD-2024-0001 Status: Gesperrt Datum: 2024-01-15

Bestellnummer kopieren — Kopiere den Gutscheincode in die Zwischenablage.

✓ Kopiert! Code wurde in die Zwischenablage kopiert.

Filialfinder — Standort abfragen (simuliert). Allow oder Deny.

Status:

Latitude:

Longitude:

✓ Nächste Filiale: Zürich Bahnhofstrasse (0.3 km)

✗

Warenkorb-Persistenz — Wert in localStorage setzen, lesen und löschen.

Gespeicherter Wert:

✓ Warenkorb gespeichert!

Formular-Entwurf — Wert in sessionStorage setzen, lesen und löschen. Daten gehen beim Schliessen des Tabs verloren.

Gespeicherter Wert:

✓ Entwurf gespeichert (nur für diesen Tab)!

Spracheinstellung — Cookie setzen, lesen, löschen und Ablauf prüfen.

Aktueller Cookie:

✓ Spracheinstellung gespeichert!

✗ Cookie gelöscht.

Rechnung drucken — Print-Dialog auslösen. Navigations-Elemente werden im Druck ausgeblendet.

Rechnung #2026-0042

Artikel: SwissTD Playground Lizenz

Betrag: CHF 199.00

(Dieser Hinweis wird beim Drucken ausgeblendet)

✓ Print-Dialog wurde aufgerufen.

Shortcuts — Tastenkombinationen (Ctrl+S, Ctrl+Z, Enter, Escape). Klicke den Bereich und drücke eine Taste.

Klicke hier und drücke eine Taste

Aktion:

Event-Log:

Datei-Manager — Rechtsklick für Kontextmenü mit Optionen (Kopieren, Einfügen, Löschen).

Gewählte Aktion:

✓ Datei kopiert!

✗ Datei gelöscht!

Externe Vorschau — window.open mit URL und Fenstergrösse (600×400).

URL

Grösse

✓ Popup geöffnet (×)

Session-Timeout — Alert erscheint nach 5s. Auto-Close nach weiteren 10s. Manuell schliessbar.

Alert erscheint in Sekunden...

⚠

Achtung: Session läuft ab!

✓ Alert manuell geschlossen.

Kommentar-Editor — contenteditable div mit Zeichenlimit (500). HTML wird beim Einfügen gefiltert.

/ 500 Zeichen

✓ Kommentar gesendet!

✗

Blog-Beitrag — Rich Text Editor mit Toolbar (Bold, Italic, Link, Liste, Undo). Max 2000 Zeichen.

Schreiben Sie hier Ihren Blog-Beitrag...

/ 2000 Zeichen

✓ Blog-Beitrag veröffentlicht!

✗

Datenschutz — Cookie-Consent-Banner mit Akzeptieren, Ablehnen und Einstellungen.

Webseiten-Inhalt hier...

✓ Alle Cookies akzeptiert

✗ Nur notwendige Cookies

⚙ Individuelle Einstellungen gespeichert

Kontakt — Einfaches Kontaktformular (Name, E-Mail, Nachricht).

✓ Nachricht gesendet an !

✗

Registrierung — Formular mit Live-Validierung.

✓ Registrierung erfolgreich!

Checkout — 3-Schritt Bestellassistent.

1. Adresse 2. Zahlung 3. Bestätigung

Name *

Strasse *

PLZ *

Ort *

Zahlungsmethode *

Kartennummer / Referenz *

Name:

Adresse:

Zahlung: ()

✓ Bestellung abgeschlossen!

Versand — Versandart wählen, zusätzliche Felder erscheinen je nach Auswahl.

Versandart

Standard Express Abholung

Telefonnummer für Rückruf *

Filiale auswählen *

✓ Versandart bestätigt!

✗

Warenkorb — Bestellwert berechnen (Menge × Preis − Rabatt%).

Profil — Klicken Sie auf einen Wert um ihn direkt zu bearbeiten (Inline-Edit).

✗

Einstellungen — Änderungen werden automatisch gespeichert (nach 1s Pause).

Shopname

Beschreibung

Gespeichert Wird gespeichert...

Adresse — Land wählt Kantone/Bundesländer vor, Stadt folgt automatisch.

Produktbild — Bild mit alt-Text und Ladeprüfung. Verifiziere alt, naturalWidth und teste ein kaputtes Bild.

✓ Bild geladen — naturalWidth > 0.

✓ alt-Text vorhanden.

⚠ Ungültige src gesetzt — alt-Text sollte sichtbar sein.

Responsive Bild — Verschiedene Auflösungen (srcset/sizes). Resize-Buttons simulieren Viewport.

Responsive Platzhalter - Passt sich der Bildschirmgrösse an

✓ Desktop-Auflösung simuliert (400w).

✓ Tablet-Auflösung simuliert (300w).

✓ Mobile-Auflösung simuliert (160w).

✓ Resize durchgeführt — Bildquelle wechselt.

Zeichenfläche — Auf Canvas zeichnen/löschen. Draw-Button, Clear-Button, Eraser.

✓ Strich gezeichnet — Pen-Stroke sichtbar.

✓ Radierer angewendet — Bereich gelöscht.

✓ Canvas komplett geleert.

⚠ Zeichnung stoppt am Canvas-Rand (mouseleave).

Interaktive Grafik — SVG mit Hover-Effekt und ARIA. Klickbare SVG-Elemente.

Klicks: 0 — Klicke auf Hintergrund oder Kreuz

✓ SVG gerendert — korrekte Grösse.

✓ Farbwechsel bei Klick — Hover-Effekt aktiv.

✓ aria-label vorhanden.

Produktvideo — Video-Player mit Play/Pause/Poster. Controls testen.

✓ Video abgespielt.

✓ Video pausiert.

✓ Poster-Bild vorhanden.

⚠ Video-Ende erreicht — Replay oder Poster erwartet.

Podcast — Audio-Player mit Play/Pause. Ende-Erkennung.

✓ Audio abgespielt.

✓ Audio pausiert.

⚠ Audio-Ende erreicht — kein Loop (stops, no loop).

Shop — Interner Link zur Produktseite. Klicken Sie den Link und prüfen Sie die Navigation.

Zur About-Seite →

✓ Link wurde geklickt — Navigation ausgelöst.

✓ href ist korrekt: /about

✓ target ist _self oder nicht gesetzt (interner Link).

Footer — Externer Link zu swisstestingday.ch (neues Tab, rel=noopener).

Swiss Testing Day ↗

✓ Externer Link geklickt — neues Tab würde öffnen.

✓ rel="noopener noreferrer" ist gesetzt.

⚠ Sicherheitsrisiko: Ohne rel=noopener ist Tabnapping möglich!

FAQ — Anker-Links zu Sektionen. Klicken Sie die Links um zur Zielsektion zu scrollen.

📌 Sektion: FAQ

📌 Sektion: Kontakt

📌 Sektion: Versand

✓ Anker-Scroll ausgelöst.

✓ URL-Hash korrekt gesetzt.

⚠ Kein Fehler, kein Scroll — fehlendes Ziel wird ignoriert.

Shop — Dropdown-Navigationsmenü (Kategorien). Hover/Click öffnet, Klick ausserhalb schliesst.

Home Über uns Produkte Kontakt

✓ Ausgewählt: — Menü geschlossen.

✓ aria-expanded wird korrekt gesetzt.

✓ Tastaturnavigation (ArrowDown) funktioniert.

Shop — Breadcrumb-Navigation (Home › Uhren › Omega). Links + aktuelle Seite.

✓ Breadcrumb "" geklickt — Navigation ausgelöst.

✓ aria-current="page" korrekt auf letztem Item.

✓ Separatoren (›) korrekt zwischen allen Items.

Produkt — Tab-Navigation (Beschreibung, Bewertungen, Versand). Klick wechselt Tab.

Übersicht: Hochwertige Schweizer Uhrmacherkunst seit 1848.

Details: Automatikwerk, Saphirglas, 42mm Gehäuse, wasserdicht bis 300m.

Bewertungen: ⭐⭐⭐⭐⭐ — 127 Kundenbewertungen.

✓ Erster Tab (Übersicht) ist der Default.

✓ Pfeiltasten-Navigation funktioniert.

✓ ARIA-Rollen tablist + tabpanel korrekt.

FAQ — Aufklappbare Fragen (3 Einträge). Nur eine gleichzeitig geöffnet.

Rücksendungen sind innerhalb von 30 Tagen möglich. Kontaktieren Sie unseren Kundenservice.

Wir akzeptieren Kreditkarten, PayPal, TWINT und Rechnung.

Standardlieferung 3–5 Werktage, Expresslieferung 1–2 Werktage.

✓ Panel ist geöffnet.

✓ Alle Panels geschlossen.

✓ multiOpen=false: Nur ein Panel gleichzeitig möglich.

Shop — Seitennummerierung (1–5). Prev/Next + Seitenzahlen + Disabled-States an Grenzen.

Seite von

✓ Prev ist auf Seite 1 deaktiviert — korrekt!

⚠ Sie sind nicht auf Seite 1 — navigieren Sie zuerst dorthin.

✓ Next ist auf der letzten Seite deaktiviert — korrekt!

⚠ Sie sind nicht auf der letzten Seite — navigieren Sie zuerst dorthin.

Vorschau — Externe Seite im iFrame einbetten. Title-Attribut prüfen, in iFrame interagieren.

✓ Input im iFrame ausgefüllt — Wert gesetzt.

✓ Formular im iFrame abgesendet — Ergebnis sichtbar.

✓ title-Attribut vorhanden — Screenreader kann den Frame beschreiben.

✓ Kontext-Wechsel simuliert — Selenium switchTo().frame() Szenario.

Dokumentation — Verschachtelte iFrames (Outer → Inner). In beiden Ebenen interagieren.

✓ Outer Frame erreichbar — Ebene 1 Content sichtbar.

✓ Inner Frame erreichbar — Button in Ebene 2 gefunden.

✓ Inner Button geklickt — Text geändert zu "Geklickt!".

✓ Zurück zum Hauptdokument — defaultContent wiederhergestellt.

Web Component — Open Shadow DOM. Elemente innerhalb des Shadow Root finden und interagieren.

Projizierter Light-DOM Inhalt

✓ Custom Element gerendert — Shadow Root (open) vorhanden.

✓ shadowRoot.querySelector gefunden — Shadow Button erreichbar.

✓ Shadow Button geklickt — Aktion innerhalb des Shadow DOM ausgelöst.

✓ Slot-Inhalt projiziert — Light DOM wird in Shadow DOM angezeigt.

✓ CSS ist gekapselt — äussere Styles greifen nicht ins Shadow DOM.

Integration — Cross-Origin iFrame (eingeschränkter Zugriff). PostMessage-Kommunikation.

✓ Cross-Origin Frame geladen — visuell sichtbar.

⚠ contentDocument blockiert — Same-Origin-Policy greift (SecurityError).

✓ postMessage gesendet — Kommunikation über Grenzen hinweg.

✓ Antwort empfangen — Bidirektionale Kommunikation funktioniert.

Design System — Verschachteltes Shadow DOM (Outer Shadow → Inner Shadow). Deep-Query.

✓ Outer Shadow Root vorhanden — Ebene 1 erreichbar.

✓ Inner Shadow Root vorhanden — Ebene 2 erreichbar (Chaining nötig).

✓ Innerer Button geklickt — Event aus verschachteltem Shadow DOM.

⚠ querySelector scheitert — Shadow-Grenzen müssen schrittweise traversiert werden!

Drittanbieter-Widget — Closed Shadow DOM. Kein direkter Zugriff möglich, Workarounds zeigen.

✓ Component gerendert — visuell sichtbar, Shadow Root existiert intern.

⚠ el.shadowRoot === null — Closed Shadow DOM blockiert direkten Zugriff!

✓ Side-Effect getestet — Output-Element bestätigt die Interaktion.

Produktkatalog — Statische Übersicht der Top-5 Produkte.

Name	Preis CHF	Kategorie
Schweizer Taschenmesser	49.90	Outdoor
Toblerone 360g	8.50	Schokolade
Appenzeller Käse	12.80	Käse
Rivella Rot 6er	9.60	Getränke
Ragusa Classique	3.90	Schokolade

✓ Tabellenstruktur korrekt — 5 Zeilen, Header mit scope.

✗

Backoffice — Klicken Sie auf Spaltenheader zum Sortieren.

Name	Preis (CHF)	Datum

Backoffice — Kundenliste durchsuchen und filtern.

Name	Ort	Status

von 8 Kunden

✓ Filter angewendet — Ergebnisse.

Backoffice — Bestellungen durchblättern (5 pro Seite).

Bestell-Nr.	Kunde	Betrag CHF	Datum

Seite /

Backoffice — Preise direkt in der Tabelle ändern (Doppelklick → Edit → Enter/Escape).

Name	Preis (CHF)

✗

Backoffice — Bestellungen für Batch-Export auswählen.

	Bestell-Nr.	Inhalt

ausgewählt

Backoffice — Bestelldetails einblenden (Accordion-Zeilen).

	Bestell-Nr.	Inhalt	Betrag (CHF)

Backoffice — Produktliste verwalten (CRUD: Hinzufügen, Bearbeiten, Löschen).

Name	E-Mail	Rolle	Aktionen

✗

Zeile wirklich löschen?

Produktseite — Preisanzeige in CHF mit Originalpreis (durchgestrichen) und Rabatt.

Produktseite — Menge wählen + "In den Warenkorb" mit Feedback-Animation.

Warenkorb: Ausverkauft simulieren

✗

Checkout — Gutscheincode eingeben und validieren.

Gültiger Code: SAVE10 (10%)

Katalog — Produkte nach Preis/Name/Bewertung sortieren.

Sortieren nach:

Katalog — Grid/Liste Ansicht umschalten.

Ansicht:

Katalog — Anzahl Produkte pro Seite (12/24/48) + Pagination.

Pro Seite:

Shop — Suchen Sie nach Uhren-Modellen.

Produktsuche

Kontakt — Kontaktformular mit Name, E-Mail, Betreff, Nachricht + Honeypot.

✓ Nachricht gesendet!

Warenkorb — Gewicht in kg angeben (Schritte à 0.5 kg, 0–100 kg).

Gewicht (kg)

✓ Gewicht übernommen!

✗

Produktfilter — Preisbereich festlegen (CHF 0–100).

Maximalpreis (CHF)

0 100

✓ Filter angewendet!

✗

Shop-Design — Akzentfarbe für Ihren Shop wählen.

Akzentfarbe

✓ Design gespeichert!

✗

Warenkorb — Artikelmenge mit +/− Buttons anpassen (0–99).

Anzahl

✓

✗

Bestellstatus — Bearbeitungsfortschritt anzeigen (0–100%).

Fortschritt

✓

Lager — Füllstand-Anzeige mit low/high/optimum Bereichen.

Lagerbestand 60 von 100

✓

Warenkorb — Zwischensumme wird automatisch berechnet (Menge × Preis).

Menge

Einzelpreis (CHF)

Zwischensumme: CHF 25

✓

Äquivalenzklassen «Mögliche Variationen»

●

Positive Äquivalenzklassen

Gültige Eingaben

●

Negative Äquivalenzklassen

Ungültige Eingaben

Frameworks

Manche Fehler treten nur in bestimmten Frameworks auf. Schalte eines zu, um seine Fehler mitzusuchen. Die ersten vier laufen immer mit.

🕷

Bug-Hunting aktiv

Ein Bug wurde in das Element eingebaut. Findest du ihn? Option+Klick auf das verdächtige Element um das Quiz zu starten.

✓ Alle Bugs dieser Schwierigkeitsstufe gefunden. Nächste Stufe wird freigeschaltet...

🏆

Alle Bugs gefunden!

Du kannst jetzt einzelne Bugs frei injizieren und erkunden.

Bug-Katalog (alle gefunden)

Welcher Bug wurde eingebaut?

✓ Bug gefunden! Nächster Bug wird geladen...

✗ Nicht ganz. Die richtige Antwort ist markiert.

Locators & Code

Workflow Training

Einzelmasken

Abteilung

End-to-End

So funktioniert das Workflow Training

1. Stufe und Workflow auswählen

2. Den Workflow durcharbeiten

3. Workflow abschliessen

4. Nächste Stufe freischalten

5. Punkte sammeln