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

Question

This question is a part of another question I asked. However, I already found the answer to this part and thought it would be useful for other people as well. Part of my other question:

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.

Answer 1

tl;dr: use FirefoxDriver

I contacted David Burns of W3C. He was very helpful and his answer cleared up a lot for me.

First of all, FirefoxDriver for now still takes screenshots of the full page. David said:

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.

So unfortunately this will probably change in the future, but for now it is good (when you use FFdriver)..

He also explains why this choice has been made and references to a talk he gave about how the rendering of webpages works. Later in our conversation he also referenced to the minutes of the discussion about how screenshots should be captured.

His full answer:

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