Playwright是否支持虚拟滚动？如何在虚拟滚动页面实现滚动？

Playwright对虚拟滚动的支持情况 #

Playwright完全支持处理虚拟滚动场景，但默认的locator.click()这类操作依赖元素在视口中可见——虚拟滚动下未被渲染的元素会让Playwright进入无限等待状态，这就是你遇到的核心问题。

可行的解决方法 #

以下是几种针对虚拟滚动场景的实用实现：

1. 循环滚动直到目标元素出现

通过逐步滚动页面/自定义滚动容器，每次滚动后检查目标元素是否已渲染可见，找到后再执行点击：

const targetLocator = page.locator('data-testid=row', { hasText: 'someText' });
// 替换为页面实际的虚拟滚动容器选择器
const scrollContainer = page.locator('data-testid=scroll-container'); 

while (true) {
  const isVisible = await targetLocator.isVisible();
  if (isVisible) {
    await targetLocator.click();
    break;
  }
  // 每次向下滚动500px，可根据页面调整数值
  await scrollContainer.evaluate(el => el.scrollBy(0, 500));
  // 等待滚动后的渲染，避免循环过快
  await page.waitForTimeout(300);
}

2. 调用原生API强制滚动到元素

直接使用浏览器原生的scrollIntoViewIfNeeded方法，只要元素已被渲染，就能强制滚动到视口中：

const targetElement = await page.locator('data-testid=row', { hasText: 'someText' }).elementHandle();
if (targetElement) {
  await targetElement.evaluate(el => el.scrollIntoViewIfNeeded({ behavior: 'smooth', block: 'center' }));
  await targetElement.click();
}

3. 针对无限滚动加载的优化

如果虚拟滚动是滚动到底部加载新内容的类型，可以先滚动到底部直到目标元素出现：

const targetLocator = page.locator('data-testid=row', { hasText: 'someText' });
const scrollContainer = page.locator('data-testid=scroll-container');
let lastHeight = 0;

while (true) {
  const isVisible = await targetLocator.isVisible();
  if (isVisible) {
    await targetLocator.click();
    break;
  }
  
  const currentHeight = await scrollContainer.evaluate(el => el.scrollHeight);
  // 高度不再变化说明没有新内容加载，终止循环
  if (currentHeight === lastHeight) {
    throw new Error('目标元素不存在或无法加载');
  }
  lastHeight = currentHeight;
  
  // 滚动到容器底部
  await scrollContainer.evaluate(el => el.scrollTop = el.scrollHeight);
  await page.waitForTimeout(500); // 等待新内容渲染
}

注意事项 #

• 务必替换代码中的滚动容器选择器为页面实际的虚拟滚动容器（多数虚拟滚动不会用window作为滚动载体）。
• 等待时间可根据页面渲染速度调整，避免过短导致元素未完全渲染。
• 建议添加超时逻辑，防止因目标元素不存在导致无限循环。

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