Handle lazy-loaded images
Hard120 pts~45 min
- Lazy loading
- Scrolling
- JavaScript execution
Practice app · Gear Shop
A product grid loaded from a real API with search, filters, infinite scroll and a checkout that calls a payments API.
Your starter code already declares TEST_URL — never hardcode a host.
Objective
Trigger the grid's lazy loading by scrolling and verify every newly loaded tile renders its artwork, name and price.
Your task
- 1Wait for 8 .product-tile elements and #results-count “12 products”.
- 2Scroll the last tile (or #scroll-sentinel) into view with executeScript scrollIntoView or Actions scrollToElement.
- 3Wait until 12 tiles are present.
- 4For tiles 9–12 assert the artwork (inline svg) is displayed with a non-zero size, .tile-name is not empty and .tile-price starts with “$”.
Acceptance criteria
- Loading is triggered by scrolling
- 12 tiles are rendered
- At least 3 assertions pass
Constraints
- Do not click #load-more — trigger loading by scrolling.
Selenium WebDriver 4 · Selenium · Tables & dynamic content