Automation Practice
Lazy Load Gallery
An image grid that lazy-loads each tile only when it enters view.
🧪 Testing Challenge
Goal: Scroll the grid until every tile has settled into a final state.
Challenge: Nothing loads until it's actually visible, and timing is deliberately inconsistent - random per-tile delays and a random number of tiles that fail. A fixed sleep() will not survive this page; you need real wait conditions.
Between 1 and 5 tiles fail on every run - the count and the exact tiles are random, so you can't hardcode a tile number. Your test has to detect failures dynamically, then cross-check the live stats bar (loaded / failed / remaining) against what you count in the DOM to prove the numbers agree.
- +Assert all 30 tiles start in the idle state before any scrolling occurs
- +Scroll incrementally and assert each tile moves idle → loading → loaded/error, never skipping a state
- +Count tiles with data-state="error" and assert the total is between 1 and 5
- +Assert loaded + failed + remaining always equals 30, at every point in time
- +Scroll back to the top and assert no already-resolved tile re-enters the loading state
- +Click Reset Gallery and assert every tile returns to idle with a freshly randomized error count
Image Grid
30 tiles in a 3-column grid, lazy-loaded via IntersectionObserver as they enter the viewport.
Need expert QA help? We offer team training, automation consulting, and end-to-end QA services.
Need this tested professionally?
Chasing flaky scroll-triggered elements in production tests? AssertQA delivers test automation services, manual testing services, and API testing services for teams that need real-world quality.