Async

Infinite Scroll

Advanced

Scroll to load more — total dataset is 60 items. Stable selectors: inf-item-N.

Defect #000
Defect #001
Defect #002
Defect #003
Defect #004
Defect #005
Defect #006
Defect #007
Defect #008
Defect #009
Defect #010
Defect #011

Live widget · interact freely

Manual test goal

Scroll a virtualized list until the target item appears, asserting the loader disappears between batches.

Expected result

Item #42 becomes visible after at least two batch fetches; loader spinner is removed after the final batch.

Stable selectors

Scroller[data-testid="inf-scroller"]
Item template[data-testid="inf-item-{n}"]
Loader[data-testid="inf-loader"]

Reference Playwright spec

infinite-scroll.spec.ts

import { test, expect } from '@playwright/test';

test('infinite scroll reveals later item', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/infinite-scroll');

  const scroller = page.getByTestId('inf-scroller');
  const target = page.getByTestId('inf-item-42');

  while (await target.count() === 0) {
    await scroller.evaluate((el) => el.scrollBy(0, el.clientHeight));
    await page.waitForTimeout(120);
  }
  await expect(target).toBeVisible();
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idleinfinite-scroll.spec.ts

https://lab.hakdogan.com/practice/infinite-scroll

# console output will stream here