♾️ Infinite Scroll
10 test-run results load at a time. Scroll to the bottom to fetch the next batch. Stops at 50 items.
How to automate this page
Testing infinite scroll requires scrolling a specific container element, not the page itself, and asserting on the item count after each batch loads.
npm init playwright@latest
# Run your tests
npx playwright test
# Open the HTML report
npx playwright show-report
1 Loader is visible before the first batch initial state ▼
Right after page load the loading indicator should be visible and no items should be present yet. Because `IntersectionObserver` fires quickly you may need `waitForSelector` with a `state: hidden` check instead of an immediate assertion.
import { test, expect } from '@playwright/test';
test('loader is visible on first load', async ({ page }) => {
await page.goto('https://falcoma.com/tetsing-lab/infinite-scroll-demo');
// First batch loads automatically – wait for it to finish
await page.waitForSelector('[data-testid=item-1]');
// Confirm 10 items loaded
const items = page.locator('[data-testid^=item-]');
await expect(items).toHaveCount(10);
});2 Scrolling to the bottom triggers the next batch scroll trigger ▼
After the first 10 items load, scroll the container to the bottom. The loader should appear and then a new set of 10 items should be appended.
import { test, expect } from '@playwright/test';
test('scrolling loads the next 10 items', async ({ page }) => {
await page.goto('https://falcoma.com/tetsing-lab/infinite-scroll-demo');
await page.waitForSelector('[data-testid=item-10]');
// Scroll the container to the bottom
const container = page.locator('[data-testid=scroll-container]');
await container.evaluate(el => el.scrollTop = el.scrollHeight);
// Wait for the 11th item to appear
await page.waitForSelector('[data-testid=item-11]');
const items = page.locator('[data-testid^=item-]');
await expect(items).toHaveCount(20);
});3 Count label updates with each batch state tracking ▼
After each load the counter text updates. Assert the text after the second batch shows "Showing 20 of 50 results".
import { test, expect } from '@playwright/test';
test('item count label updates correctly', async ({ page }) => {
await page.goto('https://falcoma.com/tetsing-lab/infinite-scroll-demo');
await page.waitForSelector('[data-testid=item-10]');
const container = page.locator('[data-testid=scroll-container]');
await container.evaluate(el => el.scrollTop = el.scrollHeight);
await page.waitForSelector('[data-testid=item-11]');
await expect(page.locator('[data-testid=item-count]'))
.toHaveText('Showing 20 of 50 results');
});4 "All loaded" message appears after 50 items end state ▼
Scroll through all batches until 50 items are loaded. The end-of-list message should appear and the load-more indicator should be hidden.
import { test, expect } from '@playwright/test';
test('end-of-list message shown after all 50 items', async ({ page }) => {
await page.goto('https://falcoma.com/tetsing-lab/infinite-scroll-demo');
const container = page.locator('[data-testid=scroll-container]');
// Scroll repeatedly until the end-of-list sentinel appears
for (let i = 0; i < 8; i++) {
await container.evaluate(el => el.scrollTop = el.scrollHeight);
await page.waitForTimeout(1000); // allow 800 ms load + buffer
}
await expect(page.locator('[data-testid=end-of-list]')).toBeVisible();
await expect(page.locator('[data-testid=load-more-indicator]')).toBeHidden();
});Unlock Playwright Tutorial
Get the full automation guide for Infinite Scroll — real test code, step by step.
🔒 Secure checkout · Instant access · No subscription