如何使用Playwright检查页面是否可滚动至底部？

针对页面包含多个div容器、需要验证是否能滚动至底部的场景，以下是具体的Playwright实现方案，分两种常见场景处理：

场景1：检查整个页面的滚动能力 #

直接操作全局窗口滚动，验证是否到达页面底部：

const { test, expect } = require('@playwright/test');

test('验证页面可滚动至底部', async ({ page }) => {
  await page.goto('你的目标页面URL');

  // 滚动至页面底部
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

  // 等待滚动完成（若有懒加载需延长等待时间或替换为元素等待）
  await page.waitForTimeout(1000);

  // 获取滚动相关参数
  const [scrollTop, scrollHeight, clientHeight] = await page.evaluate(() => [
    document.documentElement.scrollTop || document.body.scrollTop,
    document.documentElement.scrollHeight || document.body.scrollHeight,
    document.documentElement.clientHeight || document.body.clientHeight
  ]);

  // 验证是否到达底部（允许2px误差，避免浏览器渲染精度问题）
  expect(scrollTop + clientHeight).toBeGreaterThanOrEqual(scrollHeight - 2);
});

场景2：检查特定div容器的滚动能力 #

如果需要验证某个可滚动的div容器（而非整个页面）：

const { test, expect } = require('@playwright/test');

test('验证指定div可滚动至底部', async ({ page }) => {
  await page.goto('你的目标页面URL');

  // 定位目标可滚动容器
  const scrollContainer = page.locator('#target-scroll-div');

  // 滚动该容器至底部
  await scrollContainer.evaluate(el => el.scrollTop = el.scrollHeight);

  await page.waitForTimeout(1000);

  // 获取容器的滚动参数
  const [scrollTop, scrollHeight, clientHeight] = await scrollContainer.evaluate(el => [
    el.scrollTop,
    el.scrollHeight,
    el.clientHeight
  ]);

  expect(scrollTop + clientHeight).toBeGreaterThanOrEqual(scrollHeight - 2);
});

进阶处理：带懒加载的页面 #

若页面存在滚动加载更多内容的逻辑，需循环滚动直到内容加载完毕：

const { test, expect } = require('@playwright/test');

test('验证懒加载页面可滚动至最终底部', async ({ page }) => {
  await page.goto('你的目标页面URL');

  let prevScrollHeight = 0;
  let currScrollHeight = await page.evaluate(() => document.body.scrollHeight);

  // 循环滚动直到页面高度不再变化
  while (currScrollHeight > prevScrollHeight) {
    prevScrollHeight = currScrollHeight;
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    // 等待内容加载，建议替换为等待新增元素出现的逻辑
    await page.waitForTimeout(2000);
    currScrollHeight = await page.evaluate(() => document.body.scrollHeight);
  }

  // 验证最终滚动位置
  const [scrollTop, scrollHeight, clientHeight] = await page.evaluate(() => [
    document.documentElement.scrollTop || document.body.scrollTop,
    document.documentElement.scrollHeight || document.body.scrollHeight,
    document.documentElement.clientHeight || document.body.clientHeight
  ]);

  expect(scrollTop + clientHeight).toBeGreaterThanOrEqual(scrollHeight - 2);
});

注意事项 #

• 避免过度依赖固定时长的waitForTimeout，优先使用page.waitForSelector()等待新增元素，或page.waitForLoadState('networkidle')等待网络空闲，提升稳定性。
• 若滚动后页面高度仍有变化，需延长循环次数或调整等待逻辑，确保懒加载内容完全加载。
• 可在滚动后添加page.screenshot({ path: 'scroll-bottom.png' })，通过截图直观验证滚动结果。

内容的提问来源于stack exchange，提问作者Chris Hansen