Endless Deals · Infinite Scroll
An IntersectionObserver-driven feed that appends deterministic deals as you scroll. It genuinely ends at 100 with a real exit.
Scroll for deals. Deals never end. (They end at 100. Don't tell marketing.)
Infinite Scroll is a medium Waits & Dynamics challenge on Fun UI Playground. An IntersectionObserver-driven feed that appends deterministic deals as you scroll. It genuinely ends at 100 with a real exit. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “infinite-scroll-”, and the techniques it exercises are scroll into view, wait for appended content, loop-until conditions, IntersectionObserver pages.
At a glance
- Category
- Waits & Dynamics
- Difficulty
- medium
- Teaches
- scroll into view · wait for appended content · loop-until conditions · IntersectionObserver pages
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedinfinite-scroll-
Selectors on this page
| Locator | What it is |
|---|---|
[data-testid="infinite-scroll-item"] #infinite-scroll-item-1 | Deals render as [data-testid="infinite-scroll-item"] with ids #infinite-scroll-item-1 … -100 |
#infinite-scroll-count | Batch counter in #infinite-scroll-count ("Showing N of 100 deals") |
#infinite-scroll-sentinel | The sentinel is #infinite-scroll-sentinel; scroll it into view to load the next batch of 10 |
#infinite-scroll-end | At 100 items the sentinel is replaced by #infinite-scroll-end ("You have reached the bottom of the bazaar") |
Frequently asked questions
How do I test infinite scroll without scrolling forever?
Scroll #infinite-scroll-sentinel into view to trigger each batch of ten, and loop until a condition rather than a fixed number of scrolls: #infinite-scroll-count reports "Showing N of 100", and at 100 the sentinel is replaced by #infinite-scroll-end.
Does this feed actually end?
Yes, at 100 items — deliberately, so a loop-until-condition test has a real exit. Items are [data-testid="infinite-scroll-item"] with ids #infinite-scroll-item-1 … -100, generated from a fixed list, so the content is fully deterministic.
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
- 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.