Proposal: Add facility to take a screenshot of whole document

[SetTrend]

Currently, WebDriver only allows to take a screenshot of the current viewport.

This is not sufficient when testing CSS (cascading style sheets).

Changes to a CSS rule may affect regions anywhere on the document. Even regions that have not been in the focus while performing a test recording.

Please concider to add an action for taking a screenshot of the whole document (= Take Document Shot).

Following is the suggested workflow of taking a screenshot of the whole document:

1. Create a second, hidden viewport (= v²)
2. Enlarge v² horizontally to the minimum width required to avoid a horizontal scrollbar (Element.scrollWidth)
3. Enlarge v² vertically to the minimum height required to avoid a vertical scrollbar (Element.scrollHeight)
4. Take screenshot of v²
5. Purge v²

[andreastt]

Whilst it is possible to take screenshots of the full document in certain drivers (e.g. geckodriver), we can’t standardise this because not all browsers can feasibly implement it.

[SetTrend]

@andreastt :

Why shouldn't they be able to? Rendering to a second, hidden viewport - certainly - is already implemented by all browsers. This technique is called "double buffering", or "multiple buffering". I don't know of any browser that doesn't have this already implemented.

As a fall-back in the - really unlikely - case of a browser not being able to render a document in memory on a second, memory-only canvas, TakeDocumentShot could just mirror TakeScreenShot.

Please re-open for discussion and consideration.

[whimboo]

Isn't that just a dupe of issue #893?

[andreastt]

I don’t know why Chrome can’t support full document screenshots, but I have it on good authority that we can’t support it cross-browser.

[SetTrend]

@whimboo:

No, I don't think so. #893 is different.

It deals with determining the right moment to take a normal screenshot of a fully loaded page. The moment after any JavaScript/CSS animations have done their job.

IMHO, #893 is something that cannot be computed, because there is no "moment of final load". Think of rotating ads or carussels. With these, the page will never be finally loaded. See this example:

[SetTrend]

@andreastt :

The Chrome team actually is considering my suggestions:
https://bugs.chromium.org/p/chromedriver/issues/detail?id=2527

So I feel they also believe it's possible to create and save an off-screen image of whole documents.

Please re-open this issue for consideration.

---

I'd like to elaborate on the user stories here:

User Story (1)

Testing large enterprises' web sites, you usually have a large number of test cases to test.

However, you don't want to have the tester record each and every test case over and over again on each and every device on the market. That would be a waste of time and manpower because test cases are identical for each device. They (should) only differ in screenshots and built-in file upload / file download functionality.

So in order to create a reasonable and streamlined web site test automation for testing web sites, this is the suggested workflow:

1. The tester will be recording test cases only once, on some arbitrary device:

   

2. A WebDriver application will replay these recorded test cases on many devices (no matter whether it's a desktop device or mobile or whatever):

   

   In the course of doing this, the WebDriver application is supposed to take whole document images/screenshots on the corresponding device, thereby covering all parts of the rendered document on that particular device without any need to scroll the document parts into view.

   (Without the ability to take a screenshot of a whole document this is not possible. On desktop devices, no scrolling may be required because the page fits the screen, whereas on mobile devices scrolling may be required because the page doesn't fit. In step #1, however, the tester recorded the test case on some arbitrary device. So the recorded test case is agnostic about any kind of scrolling.)

3. The document images taken in step #2 are supposed to be saved in an ordered fashion on disk (e.g. "${TestCaseId}/${DeviceId}/${RecordingIndex}.png" for later reference.

4. Finally, test cases and reference images are then copied to the CI/CD pipeline. The WebDriver test runner there runs the same test cases on the same number of devices and compares the document images it takes with the reference document images taken in step #2. If they differ, the test fails.

 

User Story (2)

A tester is supposed to record a log-in process on a device. Currently, a screenshot may look like this:

   ... or like this ...   

In the course of testing the log-in functionality of the website, the tester is not interested or even aware of the remainder of the page.

This is what the same page screenshot looked like if it would be taken by WebDriver using the suggested Take Whole Document Image functionality:

Later on, some design guy adds a CSS rule to the website, targetting some other page. Accidentally this new rule also changes the previously tested page's footer color to light green (only) on IPhones:

Without the requested full document screenshot ability, the designer's mistake will never be recognized. The website gets deployed and is run until eventually or randomly some user reports its inability to read the footer.

---

[SetTrend]

See also: #1286