The Revolving Door · Stale Elements
A list that tears down and rebuilds its own DOM nodes on every cycle, so a reference held across a cycle goes stale — the classic exception generator.
The guest list rebuilds itself. Hold onto a row across a cycle and it turns to dust.
Stale Elements is a medium Waits & Dynamics challenge on Fun UI Playground. A list that tears down and rebuilds its own DOM nodes on every cycle, so a reference held across a cycle goes stale — the classic exception generator. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “stale-element-”, and the techniques it exercises are stale element handling, re-locate after mutation, DOM node identity, auto-refreshing lists.
At a glance
- Category
- Waits & Dynamics
- Difficulty
- medium
- Teaches
- stale element handling · re-locate after mutation · DOM node identity · auto-refreshing lists
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedstale-element-
Selectors on this page
| Locator | What it is |
|---|---|
#stale-element-cycle #stale-element-auto | Cycle: #stale-element-cycle rebuilds the list; #stale-element-auto checkbox auto-cycles (default 1500 ms, ?delay= tunes it) |
#stale-element-guest-1 [data-testid="stale-element-guest"] | Rows: #stale-element-guest-1 … -4 ([data-testid="stale-element-guest"]) are replaced (not updated) each cycle — a held reference goes stale |
#stale-element-count #stale-element-result | Cycle counter in #stale-element-count; the current roster is echoed into #stale-element-result |
Frequently asked questions
What causes a stale element reference exception?
Holding a handle to a node that was replaced rather than updated. #stale-element-cycle tears down and rebuilds rows #stale-element-guest-1 … -4 on every cycle, so any reference captured before a cycle points at a node no longer in the document.
How do I fix a stale element error properly?
Re-locate after each mutation instead of caching the handle — that is the whole lesson of the page. #stale-element-auto cycles automatically (1500 ms by default, ?delay= tunes it), #stale-element-count tracks cycles and #stale-element-result echoes the current roster.
More Waits & Dynamics
- Transporter Room · Dynamic Loading
- Paddock Controls · Dynamic Controls
- Squad Bench · Add/Remove Elements
- Pizza Order Toasts · Notification Messages
- The Bounty Board · Dynamic Content
- Endless Deals · Infinite Scroll
- Pit Wall Telemetry · Streaming Feed
- All Waits & Dynamics challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.