如何在我的宁静报告中包含整个页面的屏幕截图(而不仅仅是视口)?

How do I include screenshots of the full page in my serenity report (and not only of the viewport)?

这个问题是 another question I asked 的一部分。但是,我已经找到了这部分的答案,并且认为它对其他人也有用。 我的其他问题的一部分:

I am using serenity in combination with cucumber for automated screen tests and want to include full-page screenshots in my serenity report. The screenshots in the report are normally only a capture of the viewport. Oftentimes however, this doesn't provide enough information as this is only a part of the screen.

I found that the capturing of serenity screenshots is a part of driver implementation. As most drivers conform with the W3C definition of screenshots those drivers only capture the current viewport.

tl;dr:使用 FirefoxDriver

我联系了 W3C 的 David Burns。他非常乐于助人,他的回答让我明白了很多。

首先,FirefoxDriver目前还是全屏截图。大卫说:

FirefoxDriver (and in Marionette our W3C webdriver implementation) on the otherhand does screenshots by dumping the Document into a canvas and calling a Firefox specific API on Canvas to get a screenshot. Since we dump the entire document we can do full page screenshots. This however may change when we start putting more of the Servo code into Firefox and the way we can access screenshots changes.

所以不幸的是,这在未来可能会改变,但现在它很好(当你使用 FFdriver 时)..

他还解释了做出此选择的原因,并引用了他关于网页呈现如何工作的演讲。 后来在我们的谈话中,他还提到了关于如何捕获屏幕截图的讨论 minutes

他的完整回答:

Hi

The tl;dr; is its really hard take fullscreen shots since not all browsers have the information to create a screenshot of the whole page. Long version:

At Selenium Conf this year I did a talk about how #isDisplayed can sometimes lie to you and the reason is the same as the screenshots. To make browsers appear to make web pages load as fast as possible they workout what needs to be rendered in the view port and then render it, via doing calculations on the CPU or GPU. Because of this approach it means that browsers build up a display list of certain areas and creates "tiles" to render. It starts from the viewport and works out. Now, a browser is not going to render a whole page at a time, it will have a few times above and below ready for when you scroll and calculate the rest when you scroll.

Now ChromeDriver and Microsoft's EdgeDriver both do their screenshots from the display list and have internal APIs that only give them the viewport. This is because their reference tests (or reftests as they are known to vendors) only care about that. They both don't feel its worth the effort to do the rest because of the edge cases.

FirefoxDriver (and in Marionette our W3C webdriver implementation) on the otherhand does screenshots by dumping the Document into a canvas and calling a Firefox specific API on Canvas to get a screenshot. Since we dump the entire document we can do full page screenshots. This however may change when we start putting more of the Servo code into Firefox and the way we can access screenshots changes.

Because we only know the viewport info it leads to us then having to stitch images together to get a full page screenshot. Both ChromeDriver and IEDriver do this and both development teams consider this an ugly hack because its not always right and there isnt much they can do to make it right.

I hope that helps and explains it well. I suggest watching my talk as I explain how renders and layout engines work in Browsers.

David