代码之家  ›  专栏  ›  技术社区  ›  AJC24

使用Intern JS拍摄完整页面截图

  •  0
  • AJC24  · 技术社区  · 8 年前

    当涉及到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上的最新版本)的桌面只截图显示我发出请求时浏览器窗口中立即可见的内容。
    • 上述结果同样适用于移动设备和平板电脑上的测试。
    • 做 拍摄一整页的屏幕截图。同样的方法。相同的实现。不同的结果。

    我完全搞不懂为什么像希望拍摄一整页截图这样简单的事情被证明是一个如此复杂的问题。。。有谁能为我指出正确的方向,我能做些什么来实现我的目标?

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

    1 回复  |  直到 5 年前
        1
  •  1
  •   jason0x43    8 年前

    正如弗洛伦特指出的那样,截图实际上是由与浏览器(例如chromedriver)交互的驱动程序处理的,而不是由与驱动程序交互的实习生处理的。根据 WebDriver spec ,屏幕截图将只显示视口,而不是整个页面。JSON wire协议(WebDriver的前身)在这个问题上有点模糊。在任何情况下,不同的浏览器驱动程序可以而且确实在许多情况下表现不同。

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