javascript - 使用 Intern JS 截取整页屏幕截图

Question

在 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 上)确实截取整页屏幕截图。同样的方法。相同的实现。不同的结果。

我完全困惑为什么像希望截取整页屏幕截图这样简单的事情被证明是一个如此复杂的问题...任何人都可以为我指明正确的方向，告诉我我可以做些什么来实现我的目标？

或者在这种情况下，是否有人知道 Intern JS 的更好替代方案？现阶段我愿意接受任何想法/建议。

Answer 1

正如 Florent 指出的，屏幕截图实际上是由与浏览器交互的驱动程序(例如 chromedriver)处理的，而不是由与驱动程序交互的 Intern 处理的。根据WebDriver spec ，屏幕截图将仅是视口(viewport)的屏幕截图，而不是整个页面的屏幕截图。 JSON 有线协议(protocol)(WebDriver 的前身)在这个主题上有点模糊。无论如何，不​​同的浏览器驱动程序在许多情况下可以而且确实有不同的行为。

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