Paddock Controls · Dynamic Controls
Controls that change state asynchronously: an input that enables after a relay delay, and a checkbox added/removed from the DOM.
Enable the electric fence. Remove the goat. Wait for the system to admit it happened.
Dynamic Controls is a medium Waits & Dynamics challenge on Fun UI Playground. Controls that change state asynchronously: an input that enables after a relay delay, and a checkbox added/removed from the DOM. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “dynamic-controls-”, and the techniques it exercises are wait for enabled/disabled, wait for element removal, staleness, async confirmations.
At a glance
- Category
- Waits & Dynamics
- Difficulty
- medium
- Teaches
- wait for enabled/disabled · wait for element removal · staleness · async confirmations
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixeddynamic-controls-
Selectors on this page
| Locator | What it is |
|---|---|
#dynamic-controls-voltage #dynamic-controls-toggle-input | Fence: #dynamic-controls-voltage input + #dynamic-controls-toggle-input button (Enable/Disable) |
#dynamic-controls-goat #dynamic-controls-toggle-checkbox | Goat: #dynamic-controls-goat checkbox + #dynamic-controls-toggle-checkbox button (Remove/Add) |
#dynamic-controls-message | Each action takes ~2 s with a spinner, then writes to #dynamic-controls-message ("It's alive!" / "The goat is gone.") |
Frequently asked questions
How do I wait for an input to become enabled?
Click #dynamic-controls-toggle-input, wait for #dynamic-controls-voltage to lose its disabled state, then assert the confirmation in #dynamic-controls-message ("It's alive!"). Each action takes about two seconds; ?delay=500 shortens it for CI.
How do I wait for an element to be removed from the DOM?
Click #dynamic-controls-toggle-checkbox and wait for #dynamic-controls-goat to be absent, not merely hidden — it is genuinely removed, so a handle held across the action goes stale. Re-locate afterwards instead of caching the element.
More Waits & Dynamics
- Transporter Room · Dynamic Loading
- Squad Bench · Add/Remove Elements
- Pizza Order Toasts · Notification Messages
- The Bounty Board · Dynamic Content
- 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.