使用 Intern JS 截取整页截图答案

【问题标题】：Take Full Page Screenshots with Intern JS使用 Intern JS 截取整页截图
【发布时间】：2017-11-20 11:38:18
【问题描述】：

在 UI 自动化方面，我对 JavaScript 编程非常陌生，并且具有基于 Java 的 Selenium 背景。我目前正在尝试了解 InternJS 以及如何使用它在任何设备上获取我希望的任何 URL 的整页屏幕截图。最终目标是使用 Sauce Labs 帐户在多台设备上截取特定网站的屏幕截图，以进行手动视觉验证。

我能够将takeScreenshot() 功能分离为可重复使用的方法，如下所示：

MyFile.prototype.takeScreenshotAndWriteToFile = function (fileName) {
  return function () {
    return this.parent
      .takeScreenshot()
      .then(function (fileAsBuffer) {
        fileSystem.writeFile(fileName, fileAsBuffer, 'base64');
      })
      .catch(function (error) {
        console.log(error);
      });
  };
};

但是，当我通过我们的 Sauce Labs 帐户在各种设备/浏览器上运行此程序时，我得到以下结果：

带有 Chrome 和 Firefox（Windows 10 上的最新版本）的桌面仅截取我提出请求时浏览器窗口中立即可见的内容。
上述结果同样适用于移动设备和平板电脑上的测试。
奇怪的是，Safari 版本 11（在 Mac 上）会截取整页屏幕截图。同样的方法。相同的实现。结果不同。

我完全不明白为什么像想要截取整页屏幕截图这样简单的事情被证明是一个如此复杂的问题......谁能指出我可以做些什么来实现的正确方向我的目标？

或者如果有人知道在这种情况下有更好的实习生 JS 替代方案？在这个阶段，我愿意接受任何想法/建议。

【问题讨论】：

截取完整截图的能力由每个驱动程序提供，而不是实习生。截取完整的屏幕截图并不是一件简单的事情，尤其是当页面是动态的且具有固定元素时，并且一旦滚动开始它们就会发生变化（example）。在验证上下文中，最好的方法是在滚动窗口时截取多个屏幕截图并将它们拼接在一起。
这就是我现在正在实现的目标——基本上是在向下滚动页面时截取多个屏幕截图。只是在屏幕分辨率非常小的小型设备（例如移动设备）上，这会占用很多的屏幕截图。所以后续尝试是尝试制作一个更大的屏幕截图，涵盖所有内容，因为手动验证数十个屏幕截图也不理想。
中间内容通常由重复的元素组成。因此，截取顶部和底部的屏幕截图应该足以验证布局。
感谢弗洛伦特的建议！我会把这一切都带上船。看来我需要改变我的方法。
您好 Florent - 鉴于您是第一个对我的问题发表评论的人，您能否添加一条评论，我可以为您标记为“最佳答案”？很高兴您回答了我的问题。

标签： javascript selenium intern

【解决方案1】：

正如 Florent 所指出的，屏幕截图实际上是由与浏览器交互的驱动程序（例如 chromedriver）而不是与驱动程序交互的 Intern 处理的。根据WebDriver spec，屏幕截图只会是视口，而不是整页。 JSON 有线协议（WebDriver 的前身）在这个主题上有点模糊。在任何情况下，不同的浏览器驱动程序在许多情况下的行为都可能不同。

任何使用 WebDriver/Selenium 来管理浏览器（其中大部分，尤其是流行的开源浏览器）的测试系统都将受制于驱动程序的功能，并且可能不支持此功能。盒子。但是，它可能会在测试系统（比 WebDriver 更高级别）中实现，因此如果看起来值得，向 Intern（或您可能使用的任何基于 WebDriver 的测试系统）提交功能请求是值得的。

【讨论】：

谢谢杰森。我很满意 Florents 的回答（以及您对此的保证）是正确的，所以我放弃了“整页”的努力。感谢您的评论！很有帮助！