使用 Intern JS 获取整页屏幕截图

Question

在 UI 自动化方面，我对 Java 脚本编程还很陌生，并且来自 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 上的最新版本）仅截取在我发出请求时在浏览器 window 中立即可见的内容的屏幕截图。
与上述相同的结果适用于在移动设备和平板电脑上进行的测试。
奇怪的是，Safari 版本 11（在 Mac 上）确实截取整页屏幕截图。同样的方法。相同的实现。不同的结果。

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

或者如果有人知道在这种情况下有比 Intern JS 更好的替代品吗？在这个阶段我愿意接受任何想法/建议。

Answer 1

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

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

使用 Intern JS 获取整页屏幕截图

Take Full Page Screenshots with Intern JS

javascript

selenium

intern