[BUG] viewport: null is rendering only the default viewport height in webkit and chromium when taking screenshot

[michalweiser]

Context:

• Playwright Version: 1.0.1
• Operating System: Mac
• Node version: 13.11.0
• Browser: Chromium, WebKit
• Extra: macOS Catalina, version 10.15.4

Code Snippet

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'firefox', 'webkit']) {
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext({
      viewport: null
    });
    const page = await context.newPage();
    await page.goto('https://seznam.cz/');
    //const handle = await page.$('.footer');
    //handle.scrollIntoViewIfNeeded()
    await page.screenshot({ path: `example-${browserType}.png` });
    await browser.close();
  }
})();

When I want to screenshot the whole page in full width, I get it done only in Firefox. Webkit and Chromium both make a screenshot with only 'default viewport' screenshoted. The length of the whole page height is correctly assigned to screenshot file, but only default viewport area is rendered. For webkit, the rest of height remains transparent, in case of chromium I get white background - please see attached files.

When trying to scroll any element into the view (to try to force page rendering) - with code like the one commented in my code snippet, I'm getting the same result with element scrolled into the default viewport.

Chromium

WebKit

Firefox

[pavelfeldman]

Looks like you need a fullPage: true screenshot. viewport: null is for headful / interactive mode mostly. It simply means that the user would set the viewport size via resizing the window.

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'firefox', 'webkit']) {
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://seznam.cz/');
    await page.screenshot({ fullPage: true, path: `example-${browserType}.png` });
    await browser.close();
  }
})();

[michalweiser]

Hi Pavel, thank you for the solution to my problem. Somehow I missed this option. I was thinking about closing this issue, but still a see this behavior as incosistent cross all browsers. Would you suggest to leave it open?