Selektoren-Minenfeld
Sieben Fallen aus feindlichem Markup als Stresstest für den Selektor-Generator des Rekorders. Die Problem-Elemente tragen hier absichtlich keine data-lf-Anker – so sieht fremde Produktion aus.
Shadow DOM
Zwei Custom Elements rendern ihre Controls in Shadow Roots – einer offen, einer geschlossen, wie bei Salesforce Lightning.
Iframes
Ein Same-Origin-Frame mit einem Formular darin und daneben eine Cross-Origin-Imitation.
Same-Origin (srcdoc)
Cross-Origin-Imitation
Dieser Frame lädt 127.0.0.1:4321 – gegenüber localhost:4321 ist das ein anderer Origin, was für die Imitation genügt. Funktioniert nur im Dev-Modus; in Produktion bleibt der Frame einfach leer.
Virtualisierte Liste
1000 logische Zeilen, aber im DOM existiert nur das sichtbare Fenster – die Zeilen werden bei jedem Scrollen neu erzeugt.
Befehlsmenü
Ein Toolbar-Button öffnet ein portalliertes Befehlsmenü mit Untermenü — die Einträge existieren nur, solange das Menü offen ist, wie bei Ribbon-Menüs.
Hover-Menü
Das Panel wird beim Überfahren in den DOM eingefügt und kurz nach dem Verlassen wieder entfernt – wie bei Portal-Menüs.
Canvas-Widget
Die beiden „Buttons“ sind Pixel auf einem Canvas – dahinter steckt kein einziges DOM-Element.
Identische Zeilen
Zehn Zeilen, Byte für Byte gleich: gleiche Zellen, gleicher Button, keine Ids.
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam | |
| Quartalsbericht | Finanzteam |
Neue Tabs und Popups
Das Szenario geht in einem anderen Browserkontext weiter: ein target=_blank-Link und ein window.open-Popup mit einem Formular.
Im Popup steckt ein kleines Formular — das Absenden gehört zum Szenario.
Drag & Drop (HTML5)
Karten wandern über die native dragstart/drop-API zwischen zwei Spalten.
Drag & Drop (Pointer)
Die Liste sortiert sich per Maus ohne DnD-API — pointermove und Transforms, wie bei dnd-kit.
Rich-Text-Editor
Eine contenteditable-Fläche mit Formatierungsleiste — Tippen und Formatieren leben in einem editierbaren Teilbaum.
Gehashte Klassen und generierte Ids
Jede Klasse und Id dieses Formulars entsteht beim Build und ändert sich zwischen Builds – im Stil von CSS-in-JS, Ember und React useId.