The Bounty Board · Dynamic Content
The other deliberately random page on the site: three stable card slots whose outlaw and bounty are re-rolled on every visit and every Redraw.
Three wanted posters, same three nails on the wall. Who's on them changes every visit.
Dynamic Content is a medium Waits & Dynamics challenge on Fun UI Playground. The other deliberately random page on the site: three stable card slots whose outlaw and bounty are re-rolled on every visit and every Redraw. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “dynamic-content-”, and the techniques it exercises are assert structure not content, randomized content, seeded reproducibility, stable slots vs volatile data.
At a glance
- Category
- Waits & Dynamics
- Difficulty
- medium
- Teaches
- assert structure not content · randomized content · seeded reproducibility · stable slots vs volatile data
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixeddynamic-content-
Selectors on this page
| Locator | What it is |
|---|---|
#dynamic-content-board #dynamic-content-slot-1 [data-testid="dynamic-content-slot"] | Board: #dynamic-content-board with three stable slots #dynamic-content-slot-1 … -3 ([data-testid="dynamic-content-slot"]) |
[data-testid="dynamic-content-name"] [data-testid="dynamic-content-bounty"] | Each slot carries [data-testid="dynamic-content-name"] and [data-testid="dynamic-content-bounty"] — the text in them is randomized |
#dynamic-content-refresh #dynamic-content-count | Redraw: #dynamic-content-refresh re-rolls all three slots; the count is in #dynamic-content-count |
Frequently asked questions
How do I test a page whose content changes on every visit?
Assert structure, not values. The slots #dynamic-content-slot-1 … -3 are stable, while the [data-testid="dynamic-content-name"] and [data-testid="dynamic-content-bounty"] inside them are randomized. Check that each slot has a name and a bounty, and pin ?seed=N when you need an exact board.
How do I reproduce a failure on a randomized page?
Use the seed. ?seed=N renders a repeatable board so a failure can be replayed exactly. #dynamic-content-refresh re-rolls all three slots and #dynamic-content-count tracks how many times it has happened.
More Waits & Dynamics
- Transporter Room · Dynamic Loading
- Paddock Controls · Dynamic Controls
- Squad Bench · Add/Remove Elements
- Pizza Order Toasts · Notification Messages
- Endless Deals · Infinite Scroll
- Pit Wall Telemetry · Streaming Feed
- The Revolving Door · Stale Elements
- All Waits & Dynamics challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.