Skip to main content
Automation Practice

Lazy Load Gallery

Two viewport-driven exercises side by side: a social feed that loads more posts as you scroll, and an image grid that lazy-loads each tile only when it enters view.

🧪 Testing Challenge

Goal: Clear both panels: scroll the feed on the left until you hit the end-of-list message, and scroll the grid on the right 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, batched feed fetches, and a random number of tiles that fail. A fixed sleep() will not survive this page; you need real wait conditions.

Social Feed

Starts with 10 posts, loads 10 more each time you reach the bottom, up to 50.

Each batch takes a random 0-7 seconds to arrive - a fresh random delay every single time, not one fixed value for the whole run. Author names are randomized too, not sequential, so you can't key off "post #N". Verify the feed renders exactly 10 posts on load, appends batches of 10 only once the sentinel is actually in view, stalls correctly while a batch is mid-fetch (even a near-instant 0s one), and stops for good at 50 with a clear end-of-feed message shown exactly once.

  • Assert exactly 10 posts render on initial page load, before any scrolling
  • Scroll to the bottom and assert the loading spinner appears before the next batch renders
  • Assert each batch adds exactly 10 posts, up to a maximum of 50
  • Assert the end-of-feed message appears only once the count reaches 50, never before
  • Time consecutive batch loads and assert your wait logic isn't just a fixed sleep()
  • Click Reset Feed and assert the list returns to exactly 10 posts
Showing: 10 / 50

Taylor Reed

3m ago

Finally got the flaky checkout test to pass 5 times in a row. Turns out it wasn't flaky, it was a real race condition.

20 7 3

Skyler Cross

6m ago

Hot take: if your test suite needs a sleep(5) to pass, it's not testing your app, it's testing your patience.

37 14 6

Elliot Reyes

9m ago

Wrote 12 assertions today. Deleted 9 of them because they were testing the framework, not the feature.

54 21 9

Jordan Park

12m ago

PSA: data-cy attributes are not optional. Future you will send a thank-you card.

71 28 12

Reese Patel

15m ago

Spent the morning debugging a selector that broke because a designer renamed a div. Living the dream.

88 35 0

Kai Sorensen

18m ago

Green pipeline on a Friday afternoon. Not touching anything else today.

105 2 3

Casey Nguyen

21m ago

Explicit waits > hard sleeps. Every. Single. Time.

122 9 6

Emerson Cole

24m ago

Today's lesson: an element can be 'visible' and still not be interactable. Ask me how I know.

139 16 9

Blair Whitman

27m ago

Finally got the flaky checkout test to pass 5 times in a row. Turns out it wasn't flaky, it was a real race condition.

156 23 12

Riley Novak

30m ago

Hot take: if your test suite needs a sleep(5) to pass, it's not testing your app, it's testing your patience.

173 30 0

Image Grid

30 tiles in a 3-column grid, lazy-loaded via IntersectionObserver as they enter the viewport.

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
0
Loaded
0
Failed
30
Remaining
30
Total
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...
Waiting to enter viewport...

Need expert QA help? We offer team training, automation consulting, and end-to-end QA services.

Talk to us

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.

Talk to our QA team