Selector minefield
Seven traps of hostile markup to stress-test the recorder's selector generator. On purpose, the tricky elements here carry no data-lf hooks — this is what someone else's production looks like.
Shadow DOM
Two custom elements render their controls inside shadow roots — one open, one closed — the way Salesforce Lightning does.
Iframes
A same-origin frame with a form inside, and a cross-origin imitation next to it.
Same-origin (srcdoc)
Cross-origin imitation
This frame loads 127.0.0.1:4321 — a different origin than localhost:4321, which is enough for the imitation. It only works in dev; in production the frame simply stays empty.
Virtualized list
1000 logical rows, but only the visible window exists in the DOM — rows are recreated on every scroll.
Command menu
A toolbar button opens a portalled command menu with a submenu — the items only exist while the menu is open, like ribbon menus do.
Hover menu
The panel is inserted into the DOM on hover and removed shortly after the cursor leaves — the way portal menus behave.
Canvas widget
The two “buttons” are pixels on a canvas — there is no DOM element behind them at all.
Identical rows
Ten rows that match byte for byte: same cells, same button, no ids.
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team | |
| Quarterly report | Finance team |
New tabs and popups
The scenario continues in another browsing context: a target=_blank link and a window.open popup with a form inside.
The popup holds a small form — submitting it is part of the scenario.
Drag & drop (HTML5)
Cards move between two columns through the native dragstart/drop API.
Drag & drop (pointer)
The list reorders by mouse without the DnD API — pointermove transforms, like dnd-kit does.
Rich text editor
A contenteditable surface with a formatting toolbar — typing and formatting happen inside one editable subtree.
Hashed classes and generated ids
Every class and id in this form is generated at build time and changes between builds — CSS-in-JS, Ember and React useId style.