一尘不染

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

selenium

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

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

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


阅读 247

收藏
2020-06-26

共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,因为它并不总是正确的,而且他们也无能为力。

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

大卫

2020-06-26