Pizza Order Toasts · Notification Messages
One of two deliberately random pages on the site: placing an order succeeds or fails at random. Assert the flash and branch on its class.
Order placed! Or was it? The oven decides. (Deliberately random — that's the drill.)
Notification Messages is a medium Waits & Dynamics challenge on Fun UI Playground. One of two deliberately random pages on the site: placing an order succeeds or fails at random. Assert the flash and branch on its class. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “notifications-”, and the techniques it exercises are assert either-of outcomes, flash messages, retry logic, class-based assertions.
At a glance
- Category
- Waits & Dynamics
- Difficulty
- medium
- Teaches
- assert either-of outcomes · flash messages · retry logic · class-based assertions
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixednotifications-
Selectors on this page
| Locator | What it is |
|---|---|
#notifications-order | Order button: #notifications-order — every click re-rolls the outcome |
[data-testid="flash"] | Outcome appears in the site-wide flash [data-testid="flash"]: .flash-success ("Order #N placed") or .flash-error ("Oven fire!") |
[data-testid="flash-dismiss"] | The flash is dismissible via [data-testid="flash-dismiss"] |
Frequently asked questions
How do I write a test against an action that randomly fails?
Accept both outcomes: click #notifications-order, wait for [data-testid="flash"], then branch on .flash-success versus .flash-error. For a deterministic CI run, pin it with ?force=success or ?force=error, or ?seed=N for a repeatable sequence.
Why does asserting a fixed success message make this test flaky?
Because the outcome is re-rolled on every click by design. A test that expects only "Order #N placed" fails whenever the oven catches fire. The page exists to teach either-of assertions and retry logic against a genuinely nondeterministic UI.
More Waits & Dynamics
- Transporter Room · Dynamic Loading
- Paddock Controls · Dynamic Controls
- Squad Bench · Add/Remove Elements
- 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.