Widget practice · Scroll

Scrolling patterns

One long page with hero · mid section · a deeply nested anchor · lazy-loaded list · CTA at bottom. Practise locator.scrollIntoViewIfNeeded(), page.evaluate(() => window.scrollBy/scrollTo), and asserting infinite-scroll reveal.

Long scrollable page

5 sections in a single container — total height ~3500px. The deepest anchor is inside section 4. Last section has a CTA that only loads after you scroll.

Hero · top of page

Start scrolling. The buttons above let you jump; tests should drive scroll via scrollIntoViewIfNeeded() or evaluate.

Mid section

About scrollBy(0, 1000) away from the hero. Use scrollIntoViewIfNeeded to bring it into view.

Section 3

Below this paragraph is a deep anchor element that's well off-screen. Tests should click it without manually scrolling.

★

Lazy-loaded list

Items appear as you scroll closer (IntersectionObserver). 30 items total.

Loading more…

CTA at the bottom

The button below only enables after you've scrolled past 75% of the page.

data-testid=scroll-page · section-hero · section-mid · section-deep · section-lazy · section-cta · deep-anchor · cta-button · lazy-loader · lazy-list scroll target=document.scrollingElement (use page.evaluate(() => window.scrollTo/By(...)))

No scroll action yet.

What students should practise

Click the deep-anchor by calling scrollIntoViewIfNeeded() first.
Drive scroll via page.evaluate(() => window.scrollBy(0, 1000)).
Jump to bottom: window.scrollTo(0, document.body.scrollHeight); back to top: scrollTo(0, 0).
Wait for the cta-button to become enabled — expect(button).toBeEnabled().
Assert lazy-list count grows past 10 once section-lazy is on screen.

Playwright solutionscrollIntoViewIfNeeded + evaluate scrollBy/scrollTo. Show solution

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

(async () => {
  const browser = await chromium.launch({ channel: 'chrome', headless: false });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/widgets/scroll.html');

  // 1) scrollIntoViewIfNeeded — Playwright does the scroll for you
  await page.getByTestId('deep-anchor').scrollIntoViewIfNeeded();
  await page.getByTestId('deep-anchor').click();

  // 2) scrollBy 1000 px
  await page.evaluate(() => window.scrollBy(0, 1000));
  await page.waitForTimeout(500);

  // 3) jump to bottom
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await expect(page.getByTestId('cta-button')).toBeEnabled();

  // 4) jump back to top
  await page.evaluate(() => window.scrollTo(0, 0));

  // 5) lazy list grows past 10 once visible
  await page.getByTestId('section-lazy').scrollIntoViewIfNeeded();
  const list = page.getByTestId('lazy-list').locator('li');
  await expect.poll(async () => list.count()).toBeGreaterThan(10);
})();