Playwright中对应Cypress cy.scrollTo('bottom')的实现方案是什么

如果你只是需要单次滚动到页面底部，直接调用以下代码即可：

await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

但如果是为了触发所有懒加载资源加载后截图，单次滚动大概率不满足需求，建议使用渐进式滚动+资源等待的方案，具体操作如下：

• 第一步：编写渐进式滚动逻辑，逐段滚动页面，触发每个视口区域的懒加载监听事件
• 第二步：每次滚动后等待短时间，给资源预留加载时间
• 第三步：滚动到底部后额外等待所有网络请求结束，确保资源加载完成

完整可直接复用的代码示例：

async function scrollToBottomForLazyLoad(page) {
  // 获取初始页面总高度
  let scrollHeight = await page.evaluate(() => document.body.scrollHeight);
  // 每次滚动高度设为一屏高度，保证所有视口区域都会被触发
  const viewportHeight = await page.evaluate(() => window.innerHeight);
  let currentScroll = 0;

  while (currentScroll < scrollHeight) {
    await page.evaluate((scrollPos) => window.scrollTo(0, scrollPos), currentScroll);
    // 等待100ms预留懒加载触发时间，可根据页面加载速度调整时长
    await page.waitForTimeout(100);
    currentScroll += viewportHeight;
    // 滚动过程中如果页面加载新内容导致高度变化，更新总高度
    const newScrollHeight = await page.evaluate(() => document.body.scrollHeight);
    if (newScrollHeight > scrollHeight) {
      scrollHeight = newScrollHeight;
    }
  }

  // 最后滚动到页面最底部
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  // 等待网络空闲，确保所有懒加载资源加载完成
  await page.waitForLoadState('networkidle');
}

// 调用示例，截图前执行即可
await scrollToBottomForLazyLoad(page);
await page.screenshot({ path: 'fullpage.png', fullPage: true });

如果你的页面使用特殊懒加载逻辑，还可以额外添加资源加载校验：

// 等待所有图片加载完成
await page.waitForFunction(() => Array.from(document.querySelectorAll('img')).every(img => img.complete));

内容的提问来源于stack exchange，提问作者Martin Kowalewski