如何高效获取scrollable elements内容高度以实现Selenium fullpage screenshot？

优先方案：直接计算文档总高度 #

不用遍历所有节点找滚动元素，直接通过浏览器原生属性获取整个页面的实际内容高度，这是效率最高的方式：

// 获取涵盖所有内容的文档最大高度
const fullPageHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.body.clientHeight,
  document.documentElement.clientHeight
);
// 获取页面实际宽度
const pageWidth = document.documentElement.clientWidth;

通过Selenium执行这段JS，拿到fullPageHeight和pageWidth后，调用driver.manage().window().setSize(pageWidth, fullPageHeight)设置窗口大小，再执行截图操作即可。

优化滚动元素查找（针对独立滚动容器场景） #

如果页面存在独立的滚动容器（比如侧边栏、弹窗，这类容器的内容不会被计入文档总高度），可以用CSS选择器快速筛选，避免全节点遍历：

// 筛选出垂直方向可滚动的元素
const scrollableContainers = Array.from(document.querySelectorAll('*')).filter(el => {
  const style = window.getComputedStyle(el);
  return (style.overflowY === 'auto' || style.overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
});

注意：嵌套的滚动容器只需要处理最外层，避免重复计算。如果需要完整捕获这些容器的内容，可能需要单独滚动每个容器并分段截图后拼接，但这种场景较少见。

利用浏览器原生全页截图能力 #

主流浏览器的WebDriver大多支持原生全页截图，无需手动计算高度：

• Chrome：使用ChromeDriver专属的getFullPageScreenshotAs方法（不同语言绑定对应实现，比如Python中driver.get_full_page_screenshot_as_file("fullpage.png")）
• Firefox：在初始化FirefoxOptions时添加配置options.set_preference("devtools.responsive.browserUI", true)，之后直接调用常规截图方法即可生成全页截图

这种方式由浏览器底层处理，准确性和效率都远高于手动计算。

额外注意点 #

• 动态加载页面：需等待所有内容加载完成（比如用WebDriverWait等待某个关键元素加载完毕）再执行高度计算或截图
• 固定定位元素：如果页面有固定导航栏/ footer，设置窗口高度后可能遮挡内容，可临时隐藏后再截图：

// 临时隐藏固定元素
document.querySelectorAll('[style*="position:fixed"]').forEach(el => el.style.display = 'none');
// 执行截图
// 恢复元素显示
document.querySelectorAll('[style*="position:fixed"]').forEach(el => el.style.display = '');

内容的提问来源于stack exchange，提问作者G.J