Angular 8 的量角器整页截图答案

【问题标题】：Protractor fullpage screenshot for Angular 8Angular 8 的量角器整页截图
【发布时间】：2021-07-29 06:45:13
【问题描述】：

我正在尝试使用量角器和 mocha 截取 Angular 页面的屏幕截图。我们一直在使用 protractor-screenshot-utils 作为依赖项，并在 conf.js 文件中使用它来覆盖 browser.takeScreenshot();

onPrepare: function() {
    global.screenShotUtils = new screenShotUtils({
      browserInstance : browser,
      setAsDefaultScreenshotMethod : true 
    });
},

不幸的是，它并没有完全覆盖它，而且我无法截取角度页面的整页截图（它完全适用于非角度页面）。测试得到的屏幕截图是浏览器可以显示的，不包括归结为我的问题的页面的其余部分......

是否有任何其他解决方法可以使用量角器 + mocha 对 Angular 页面进行整页截图？

【问题讨论】：

它不会覆盖 takescreenshot 方法，而是创建一个可以在任何地方调用的新函数 screenShotUtils()
@PDHide 这行 setAsDefaultScreenshotMethod : true 实际上应该根据文档覆盖它。
哪个文档，global.function 是一种声明全局函数的方式，比如截图，浏览器等
@PDHide npmjs.com/package/protractor-screenshot-utils 检查页面底部是否有注释 //这将覆盖默认 browser.takeScreenshot() 方法以获取整页图像。
你在使用导航器吗？

标签： typescript selenium protractor automated-tests mocha.js

【解决方案1】：

如果您使用的 chrome 出现问题，可能是您的导航器。 https://bugs.chromium.org/p/chromium/issues/detail?id=45209

您可以使用 hack 来修复它

browser.driver.manage().window().setSize(320, 2000);

我建议你看看这里，它可能会有所帮助：How to take screenshot of entire page in Protractor?

【讨论】：

这实际上显示了我们页面的移动网络视图。不是一个选项
你真的可以强制它显示在网络视图上吗？

【解决方案2】：

我之前遇到过类似的问题。我在 C# 中使用了一种自定义方法来滚动和捕获屏幕截图，然后将它们缝合。我知道这可能很麻烦，但在需要时可以完成这项工作。逻辑可以在这些方面起作用 -

您注意网页的高度、宽度
您检查条件是否已到达页面底部
您截取屏幕截图并保存
您向下滚动高度值
重复第 2 步

此外，您可以使用一些 3rd 方库来解决此问题。

虽然我没有现成的脚本，但您可以查看这些有用的资源 - protractor.screenshot.reporter.js（来自 this StackOverflow 的答案）、protractor-screenshot-utils、takeFullPageScreenShot method

【讨论】：

如描述中所列，我已经在使用 protractor-screenshot-utils。不幸的是，它不适用于 Angular 8。
嘿@MielYan - 你能确认你是否试过这个 - [1] Chrome 最新版本，[2] Chrome 低版本（比如 v75），[3] Firefox？该问题可能是特定于浏览器 + Angular 8 组合的。