如何在安全性报告中（而不只是视口中）包括整个页面的屏幕截图？

Question

这个问题是我提出的另一个问题的一部分。但是，我已经找到了这部分的答案，并认为这对其他人也将是有用的。我其他问题的一部分：

我正在结合使用Serenity和黄瓜来进行自动屏幕测试，并希望在我的Serenity报告中包括整页的屏幕截图。报告中的屏幕截图通常只是视口的捕获。但是，通常这并不能提供足够的信息，因为这只是屏幕的一部分。

我发现捕获宁静屏幕快照是驱动程序实现的一部分。由于大多数驱动程序都符合屏幕快照的W3C定义，因此这些驱动程序仅捕获当前视口。

Answer 1

tl; dr：使用FirefoxDriver

我联系了W3C的David Burns。他非常乐于助人，他的回答为我澄清了很多。

首先，FirefoxDriver现在仍会拍摄整个页面的屏幕截图。大卫说：

另一方面，FirefoxDriver（以及在Marionette中，我们的W3C
webdriver实现）通过将文档转储到画布中并在Canvas上调用Firefox特定的API来获取屏幕截图来进行屏幕截图。由于我们转储了整个文档，因此我们可以进行全屏截图。但是，当我们开始将更多Servo代码添加到Firefox中以及访问屏幕截图的方式发生变化时，这种情况可能会改变。

因此，不幸的是，这种情况将来可能会改变，但是就目前而言，这很好（使用FFdriver时）。

他还解释了为何做出此选择，并引用了他关于网页渲染工作方式的演讲。后来在我们的谈话中，他还引用到分钟的讨论关于截图应该如何被捕获。

他的完整答案是：

你好

tl; dr; 全屏拍摄非常困难，因为并非所有浏览器都具有创建整个页面的屏幕截图的信息。长版：

在今年的Selenium
Conf上，我谈到了#isDisplayed有时会骗你的原因，原因与屏幕截图相同。为了使浏览器看起来像使网页尽可能快地加载，它们通过在CPU或GPU上进行计算来锻炼需要在视口中呈现的内容，然后呈现该内容。由于这种方法，这意味着浏览器会建立某些区域的显示列表，并创建要显示的“平铺”。它从视口开始，然后开始工作。现在，浏览器不会一次渲染整个页面，它将在滚动时上下左右准备好几次，并在滚动时计算剩余时间。

现在，ChromeDriver和Microsoft的EdgeDriver都从显示列表中进行屏幕截图，并具有仅向其提供视口的内部API。这是因为他们的参考测试（或供应商所知的reftest）仅在乎这一点。由于边缘情况，他们俩都不觉得为剩下的事情付出努力是不值得的。

另一方面，FirefoxDriver（以及在Marionette中，我们的W3C
webdriver实现）通过将文档转储到画布中并在Canvas上调用Firefox特定的API来获取屏幕截图来进行屏幕截图。由于我们转储了整个文档，因此我们可以进行全屏截图。但是，当我们开始将更多Servo代码添加到Firefox中以及访问屏幕截图的方式发生变化时，这种情况可能会改变。

因为我们只知道视口信息，所以这导致我们不得不将图像缝合在一起以获得完整的页面截图。ChromeDriver和IEDriver都这样做，并且两个开发团队都认为这是一个丑陋的hack，因为它并不总是正确的，而且他们也无能为力。

我希望这会有所帮助并能很好地解释它。在解释渲染和布局引擎如何在浏览器中工作时，建议观看我的演讲。

大卫