How to Automate Infinite Scroll in Selenium and Playwright

Interactive Scenarios

S01Simple Scroll Appends

List Item 1

List Item 2

List Item 3

List Item 4

List Item 5

Waiting...

S02Dynamic ID Target

Invoice INV-001

Invoice INV-002

Invoice INV-003

Invoice INV-004

Invoice INV-005

Waiting...

S03Virtualized DOM

Virtualized Row 1

Virtualized Row 2

Virtualized Row 3

Virtualized Row 4

Virtualized Row 5

Virtualized Row 6

Virtualized Row 7

Waiting...

S04Manual Load More

Secret Item 1

Secret Item 2

Secret Item 3

Secret Item 4

Secret Item 5

Waiting...

Showing 8 test cases

ID	Scenario	Type	Priority
SCR_001	Simple list appends items when scrolled to bottom Expected: New items are added, list length increases ✅ positivehigh	positive	high
SCR_002	Simple list reaches the end correctly Expected: 'End of List' message is displayed ✅ positivemedium	positive	medium
SCR_003	Scroll to dynamic target Expected: Target item is found and clicked ✅ positivehigh	positive	high
SCR_004	Virtualized DOM removes off-screen items Expected: Item 1 is no longer in the DOM when Item 50 is visible ❌ negativehigh	negative	high
SCR_005	Manual Load More button appears Expected: Button becomes visible after threshold is reached ✅ positivehigh	positive	high
SCR_006	Load More button fetches final items Expected: Final target item is appended to list ✅ positivemedium	positive	medium
SCR_007	Loading indicator appears during fetch Expected: Spinner is briefly visible while items are retrieved ⚠️ edgelow	edge	low
SCR_008	Scroll bounds logic functions correctly Expected: Scrolling up does not trigger pagination requests ❌ negativelow	negative	low

Overview

Infinite scrolling relies on scroll events or Intersection Observers to trigger data fetches. Automating it requires scrolling a specific container, waiting for new DOM elements to attach, and handling scenarios where older items are detached (Virtualization).

1 · Scroll via Evaluation

Sometimes the most reliable way to scroll a custom container is to evaluate a JavaScript snippet directly in the browser context that alters the container's scrollTop property.

TypeScript

await page.evaluate(() => {
  const container = document.querySelector('.scroll-container');
  container.scrollTop = container.scrollHeight;
});

2 · Scroll Into View

Modern tools have built-in commands to scroll elements into view. You can target the last visible item in a list and ask the framework to scroll it into view, which often triggers the next batch.

TypeScript

const lastItem = page.locator('.list-item').last();
await lastItem.scrollIntoViewIfNeeded();

Method Summary

Action	Selenium	Playwright JS	Playwright PY	Cypress
Scroll Container (JS)	`js.executeScript()`	`page.evaluate()`	`page.evaluate()`	`cy.scrollTo()`
Scroll to Element	`actions.moveToElement()`	`locator.scrollIntoViewIfNeeded()`	`locator.scroll_into_view_if_needed()`	`cy.scrollIntoView()`

FAQ