[BUG] Unable to set viewport width and capture fullpage screenshot

Context:

• Playwright Version: 1.20.2
• Operating System: Linux (running inside the Playwright docker container)
• Node.js version: 16
• Browser: All

Code Snippet

// @ts-check
const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'webkit', 'firefox']) {
    /** @type {import('playwright').Browser} */
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext({ viewport: { width: 320, height: 1000 }});
    const page = await context.newPage();
    await page.goto('https://playwright.dev');
    await page.screenshot({ path: `example-${browserType}.png` });
    await browser.close();
  }
})();

Reproduction link on Playwright playground: https://try.playwright.tech/?l=javascript&s=hmy3u0h

Note that the screenshots have the https://playwright.dev page cut off and it does not show the full page.

Describe the bug

It seems that setting the viewport explicitly disallows taking full page screenshots. As far as I can tell this means it’s not possible to take full page screenshots at any viewport width than the default. There’s no way to not pass a width to the viewport option of test.use (Playwright will throw an error about expecting undefined to be a number).

No warning or anything will happen but the screenshot generated will be the height passed to test.use rather than the full page.

[sarayourfriend]

The workaround we used was to remove the overflow: hidden before calling screenshot. Here’s the utility function we wrote to ease that: https://github.com/WordPress/openverse-frontend/blob/32ce30625757aaab6e0c50cb3655e683f1a4730f/test/playwright/utils/page.ts#L3-L13

However, I think we might not need it any more. A few months ago we significantly restructured the HTML of our app (here’s one of the PRs that was involved in that, not sure if it would be helpful) and managed to remove the fixed height (or something?). Sorry, it’s been a while since we addressed the issue so I don’t remember exactly, but it did take quite a bit of working as you can see in the PR. It’s probably pretty application specific in the end 😕 I hate to say it (because I know it can be difficult), but you might need to look into restructuring your app’s HTML like we ended up having to.

[mnpenner]

Thanks! I think I found a workaround for my use-case. Instead of removing the overflow: hidden I just stretch the viewport:

async function screenshotFullPage(page: Page, path: string) {
    return screenshotElement(page.locator('.page-wrap'), path)
}

async function screenshotElement(locator: Locator, path: string) {
    const page = locator.page()
    const height = await locator.evaluate(el => el.scrollHeight)
    const viewportSize = page.viewportSize()
    const needsResize = height > viewportSize.height
    if(needsResize) {
        await page.setViewportSize({width: viewportSize.width, height: Math.ceil(height)})
    }
    await locator.screenshot(({path}));
    if(needsResize) {
        await page.setViewportSize(viewportSize)
    }
}

My .page-wrap is basically

.page-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
}

So I figure I need to stretch that element before I can screenshot it properly.