如何使用Protractor滚动网页并截取全页面截图？

现有实现的问题点 #

你当前的代码逻辑无法输出完整全页截图，核心原因有两个：

• browser.takeScreenshot() 默认仅捕获当前浏览器视口的可视内容，就算执行了window.scrollTo(0, document.body.scrollHeight)把页面拉到最底部，拍到的也只是页面最底端那一块视口的内容，并不是从上到下的整页。
• 一次性把页面直接跳到底部的滚动方式，很容易让页面的懒加载逻辑失效，中间区域的图片、异步渲染的内容可能还没加载出来就被跳过，最终截图会缺内容。
  另外旧代码里用的new Buffer(data, 'base64')写法在新版Node.js中已经被标记为废弃，运行时会输出弃用警告，兼容性不好。

可落地的实现方案 #

核心逻辑 #

• 先逐段滚动页面，从顶部开始每滚动一屏等待300毫秒，触发所有懒加载内容完成加载，最后将页面滚动回顶部。
• 根据使用场景选择对应的全页截图方式，避免只拍摄单块视口。

参考代码 #

const fs = require('fs');

// 截图写入文件辅助函数
function writeScreenShot(data: string, filename: string) {
  const stream = fs.createWriteStream(filename);
  stream.write(Buffer.from(data, 'base64'));
  stream.end();
}

// 逐段滚动页面，触发所有懒加载内容加载完成
async function scrollAndLoadAllContent() {
  // 获取页面初始总高度
  let totalPageHeight = await browser.executeScript('return document.body.scrollHeight');
  // 获取初始视口高度
  let currentViewportHeight = await browser.executeScript('return window.innerHeight');
  let currentScrollOffset = 0;
  // 逐段向下滚动
  while (currentScrollOffset < totalPageHeight) {
    await browser.executeScript(`window.scrollTo(0, ${currentScrollOffset})`);
    // 等待当前屏内容加载
    await browser.sleep(300);
    currentScrollOffset += currentViewportHeight;
    // 滚动后重新获取页面高度和视口高度，应对动态加载、窗口尺寸变化导致的数值变动
    totalPageHeight = await browser.executeScript('return document.body.scrollHeight');
    currentViewportHeight = await browser.executeScript('return window.innerHeight');
  }
  // 加载完成后滚动回页面顶部
  await browser.executeScript('window.scrollTo(0, 0)');
}

// 一次性截取完整全页图（无需后续拼接）
async function takeFullPageScreenshot() {
  // 先加载所有页面内容
  await scrollAndLoadAllContent();
  // 获取加载完成后的全页总高度、当前视口宽度
  const fullPageHeight = await browser.executeScript('return document.body.scrollHeight');
  const viewportWidth = await browser.executeScript('return window.innerWidth');
  // 调整浏览器窗口尺寸，匹配全页高度、保持原有宽度
  await browser.manage().window().setSize(viewportWidth, fullPageHeight);
  // 等待窗口尺寸调整完成
  await browser.sleep(500);
  // 执行截图
  const screenshotBase64 = await browser.takeScreenshot();
  writeScreenShot(screenshotBase64, 'full-page-screenshot.png');
}

实操注意事项 #

• 所有滚动、调整窗口尺寸的操作都是异步的，必须通过await等待上一步操作完全结束后再执行截图逻辑，否则会因为截图时机过早，出现内容缺失、画面截断的问题。
• 如果测试场景不允许修改原有浏览器窗口尺寸，可以调整截图逻辑：逐段滚动页面时每滚动一屏就截取一张当前视口的图，最后把所有分段截图纵向拼接，同样可以得到完整的全页图。

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