How do I use Playwright to scroll through a web page and ensure all elements are loaded properly?

Answer

Scroll and Hydrate a Web Page with Playwright

To scroll a web page and ensure all elements are loaded properly, you can use Playwright's auto-waiting feature and the Page.mouse.wheel method.

Auto-Waiting Feature

Playwright's auto-waiting feature performs actionability checks on elements before making actions. It waits for all relevant checks to pass before performing the requested action. If the checks don't pass within the given timeout, the action fails with a TimeoutError.

Page.mouse.wheel Method

Use the Page.mouse.wheel method to simulate mouse wheel events for scrolling purposes. Here's an example:

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

test('Scroll and hydrate a web page', async ({ page }) => {
  await page.goto('https://ray.run');

  // Scroll down
  await page.mouse.wheel(0, 100);

  // Scroll up
  await page.mouse.wheel(0, -100);
});

Scroll Elements into View

Additionally, use the scrollIntoViewIfNeeded method to scroll an element into view if needed, ensuring it's visible in its containing element:

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

test('Scroll element into view', async ({ page }) => {
  await page.goto('https://ray.run');

  const element = await page.locator('#some-element');
  await element.scrollIntoViewIfNeeded();
});

By using these methods effectively, you can ensure your entire web page is properly hydrated and ready for interaction with users or automated tests.