[Question] FullPageScreenshot is not capturing the full page

[senthilkumar10]

Hi - I have the following script to capture the full page screenshot

@Test
    public void googleTest(){
       Playwright playwright = Playwright.create();
        BrowserType.LaunchOptions launchOptions = new BrowserType.LaunchOptions();
        launchOptions.setHeadless(false)
                .setChannel(BrowserChannel.CHROME);
        Browser browser = playwright.chromium().launch(launchOptions);
        BrowserContext browserContext = browser.newContext();
        Page page = browserContext.newPage();
        page.navigate("https://google.com");
        page.click("text=I agree");
        System.out.println(page.title());
        page.screenshot(new Page.ScreenshotOptions()
                .setPath(Paths.get("colosseum-pixel2.png"))
                .setFullPage(true)
        );

    }

The script runs fine and it takes the screenshot at the end. But the screenshot is not full page. Please refer attached the screenshot.

I am running this script using Playwright 1.10.0
OS - Ubuntu 20.04.2

[yury-s]

Which chrome version are you using? (go to chrome://version) I couldn't reproduce it with this:

But I also didn't get an element with "I agree" text in it.

[senthilkumar10]

Hi Yury,

Please find below the chrome version. I am located in UK, I get Cookies Consent popup with two options to click ''customise' and 'I agree' as part of GDPR .

Google Chrome	90.0.4430.212 (Official Build) (64-bit)
Revision	e3cd97fc771b893b7fd1879196d1215b622c2bed-refs/branch-heads/4430@{#1429}
OS	Linux
JavaScript	V8 9.0.257.29
User Agent	Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Command Line	/usr/bin/google-chrome-stable --incognito --flag-switches-begin --flag-switches-end --origin-trial-disabled-features=SecurePaymentConfirmation
Executable Path	/opt/google/chrome/google-chrome

[yury-s]

Got you about GDPR dialog. Is it reproducible in headless mode (launchOptions.setHeadless(false))?

[senthilkumar10]

I believe you're asking me to change launchOptions.setHeadless(true)?

I did that and it is taking the full page screenshot in headless mode as expected. Please refer attached the screenshot.

Looks like the problem occurring only when it is launchOptions.setHeadless(false)

[yury-s]

I believe you're asking me to change launchOptions.setHeadless(true)?

Yes, thank you!

I did that and it is taking the full page screenshot in headless mode as expected. Please refer attached the screenshot.

Yes, I see. Does the problem reproduce if you drop BrowserChannel.CHROME option and use bundled version of Chromium? (it looks like a regression on Chrome side but I don't have the most recent stable version to test it locally yet)

[reggiepierce]

I can confirm that this is happening. It looks like the viewport gets squashed right before the screenshot is rendered

[yury-s]

It seems to be a timing issues, basically not all tiles of the page image are rasterized by the time the snapshot is taken. @senthilkumar10 @reggiepierce To validate that, could you insert timeout before the screenshot to give the browser time to render:

...
        page.click("text=I agree");
        System.out.println(page.title());
        page.waitForTimeout(1000);
        page.screenshot(new Page.ScreenshotOptions()
...

You can also open DevTools on the page and in the Console drawer > Rendering tab (you may have to click ⋮ menu to open it) enable Layer borders option:

It will draw the tiles grid, our hypothesis is that some of the tiles are not rendered yet when the screenshot is taken, on my machine it looks like this:

[senthilkumar10]

I have added the page wait from 1000 and increased up till 5000 but still the screenshots is not full page.

[yury-s]

Hmm, thanks for trying that's weird 🤔 Can you also try with this argument:

...
    launchOptions.setHeadless(false)
      .setArgs(Collections.singletonList("--use-gl=swiftshader"))
      .setChannel(BrowserChannel.CHROME);
...

It will force Chrome to use software sharer implementation (which is what is used in headless I believe).

[yury-s]

@senthilkumar10 does it work if you just remove .setFullPage(true) ?

[senthilkumar10]

I ran the following tests

Test 1 :-

'''
launchOptions.setHeadless(false)
.setArgs(Collections.singletonList("--use-gl=swiftshader"))
.setChannel(BrowserChannel.CHROME);
'''

removed '.setFullPage(true)

Result - Screenshot is not FullPage

Test 2:-

'''
launchOptions.setHeadless(false)
.setArgs(Collections.singletonList("--use-gl=swiftshader"))
.setChannel(BrowserChannel.CHROME);
'''

with '.setFullPage(true)

Result - Screenshot is not FullPage

Test 3:-

'''
launchOptions.setHeadless(true)
.setArgs(Collections.singletonList("--use-gl=swiftshader"))
.setChannel(BrowserChannel.CHROME);
'''

with '.setFullPage(true)

Result - Screenshot is FullPage

Test 4:-

'''
launchOptions.setHeadless(true)
.setArgs(Collections.singletonList("--use-gl=swiftshader"))
.setChannel(BrowserChannel.CHROME);
'''

removed '.setFullPage(true)

Result - Screenshot is FullPage

[yury-s]

So in headful mode passing "--use-gl=swiftshader" solves the problem and you get entire page captured regardless of setFullPage value, correct?

[senthilkumar10]

Sorry for the confusion. In headful mode (launchOptions.setHeadless(false)) passing "--use-gl=swiftshader" also doesn't solves the problem regardless of '''setFullPage''' value

[regbo]

Below is a simple test (using 1.11.0) that illustrates the issue.

Here's the images outputted: https://imgur.com/a/O3C0Dw7

package test;

import java.nio.file.Paths;
import java.util.Arrays;
import java.util.List;
import java.util.UUID;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.BrowserType.LaunchOptions;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class ScreenshotTest {

	public static void main(String[] args) {
		try (Playwright playwright = Playwright.create()) {
			List<BrowserType> browserTypes = Arrays.asList(playwright.chromium(), playwright.firefox());
			for (BrowserType browserType : browserTypes) {
				for (var headless : List.of(false, true)) {
					for (var swiftshader : List.of(false, true)) {
						var launchOptions = new LaunchOptions().setHeadless(headless);
						if (swiftshader)
							launchOptions.setArgs(List.of("--use-gl=swiftshader"));
						try (Browser browser = browserType.launch(launchOptions)) {
							BrowserContext context = browser.newContext();
							Page page = context.newPage();
							page.navigate(
									"https://stackoverflow.com/questions/33770549/viewport-vs-window-vs-document");
							var path = Paths.get(String.format("temp/screenshot-%s-%s-%s-%s.png", browserType.name(),
									headless ? "headless" : "headfull", swiftshader ? "swiftshader" : "defaultshader",
									UUID.randomUUID().toString()));
							page.screenshot(new Page.ScreenshotOptions().setFullPage(true).setPath(path));
							System.out.println(path.toFile().getAbsolutePath());
						}
					}
				}
			}
		}
	}
}

[regbo]

I think this may be an underlying driver problem:

microsoft/playwright#6691

[yury-s]

Although the bug you referenced looks different (as it has to do with element screenshot) the problem described in this issue is certainly a driver or more precisely Chromium problem. Unfortunately we haven't been able to reproduce it locally so far which makes it hard to debug. It may be specific to some graphics cards, what does sudo lshw -C display print for you?

[senthilkumar10]

I get the below output

*-display
description: VGA compatible controller
product: UHD Graphics 620
vendor: Intel Corporation
physical id: 2
bus info: pci@0000:00:02.0
version: 07
width: 64 bits
clock: 33MHz
capabilities: pciexpress msi pm vga_controller bus_master cap_list rom
configuration: driver=i915 latency=0
resources: irq:134 memory:b0000000-b0ffffff memory:a0000000-afffffff ioport:4000(size=64) memory:c0000-dffff

[mxschmitt]

Closing as part of the triage process since it seemed stale. Please create a new issue with a detailed reproducible if you still face issues with Playwright for Java.