The Reshuffled Floor · Challenging DOM
The one page whose target elements have no stable id or class by design, plus a 200-row DOM-size stress test next to it — locate by role and text instead.
Three bid buttons redraw their own id and class every visit. Two hundred lots don't.
Challenging DOM is a hard Frames, Windows & DOM challenge on Fun UI Playground. The one page whose target elements have no stable id or class by design, plus a 200-row DOM-size stress test next to it — locate by role and text instead. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “challenging-dom-”, and the techniques it exercises are locate by role/text, ignore volatile attributes, large-DOM performance, structural locators.
At a glance
- Category
- Frames, Windows & DOM
- Difficulty
- hard
- Teaches
- locate by role/text · ignore volatile attributes · large-DOM performance · structural locators
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedchallenging-dom-
Selectors on this page
| Locator | What it is |
|---|---|
#challenging-dom-reshuffle | The three "Place bid" buttons get a fresh random id and class on every load and every #challenging-dom-reshuffle click — do not rely on them |
#challenging-dom-result | The live #challenging-dom-result readout echoes the current (volatile) ids so you can see them change without devtools |
#challenging-dom-table [data-testid="challenging-dom-row"] | Separately: #challenging-dom-table lists 200 perfectly stable rows ([data-testid="challenging-dom-row"]) — a DOM-size stress test, not a selector trap |
Frequently asked questions
How do I locate an element with no stable id or class?
By role and accessible name. The three "Place bid" buttons regenerate a random id and class on every load and every #challenging-dom-reshuffle click, so target button with the name "Place bid — Lot 1" instead. #challenging-dom-result echoes the current volatile ids.
Is a 200-row table a selector problem?
No — #challenging-dom-table's 200 rows ([data-testid="challenging-dom-row"]) are perfectly stable. They are a DOM-size stress test sitting next to the selector trap, so the two failure modes can be told apart.
More Frames, Windows & DOM
- Multiverse Portals · Multiple Windows
- Hero Gazette Editor · iFrame Editor
- Mission Control · Nested Frames
- Droid Memory Core · Shadow DOM
- The Waiting Room · Modal & Focus Trap
- The Vanishing Act · Visibility Semantics
- All Frames, Windows & DOM challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.