Playwright: Full page screenshot not rendering correctly

[rightqa]

Here is my code

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.launch(); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.waze.com/');
  await page.screenshot({ 
      path: 'example.png',
      fullPage : true });

  await browser.close();
})();

If you see the content at the bottom of the page is not properly captured in screenshot. Any help will be appreciated.

[arjunattam]

Interesting example, thanks for sharing. On observing the page, I noticed that the bottom parts of the page load after scrolling. To replicate this behavior through Playwright, I've added a method scrollFullPage to your code snippet, executed right before taking a screenshot.

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.launch({ headless: false }); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.waze.com/');
  await scrollFullPage(page);

  await page.screenshot({ 
    path: 'example.png',
    fullPage : true
  });

  await browser.close();
})();

async function scrollFullPage(page) {
  await page.evaluate(async () => {
    await new Promise(resolve => {
      let totalHeight = 0;
      const distance = 100;
      const timer = setInterval(() => {
        const scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;

        if (totalHeight >= scrollHeight){
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
}

[zac11]

Any chance this can be implemented as a method since there are many scenarios where we're in need of taking full page screenshots.
This was a limitation in Puppeteer and it would be a definite plus point for a lot of users imho.
Issue - https://github.com/GoogleChrome/rendertron/issues/108 (Puppeteer doesn't support full page screenshot)

[arjunattam]

Thanks @zac11. Full page screenshots are supported with the fullPage: true flag. Can you share any examples where the flag does not work for you? Thanks!

[jcousins-ynap]

It's definitely due to the website animating in all images when inside the viewport. A fullpage screenshot scrolls too fast for the code to show the images. This isn't a puppeteer/playwright limitiation.

I wonder if turning off CSS transitions before taking the screenshot would help?

* {
  transition: unset !important;
}

[rightqa]

Interesting example, thanks for sharing. On observing the page, I noticed that the bottom parts of the page load after scrolling. To replicate this behavior through Playwright, I've added a method scrollFullPage to your code snippet, executed right before taking a screenshot.

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.launch({ headless: false }); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.waze.com/');
  await scrollFullPage(page);

  await page.screenshot({ 
    path: 'example.png',
    fullPage : true
  });

  await browser.close();
})();

async function scrollFullPage(page) {
  await page.evaluate(async () => {
    await new Promise(resolve => {
      let totalHeight = 0;
      const distance = 100;
      const timer = setInterval(() => {
        const scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;

        if (totalHeight >= scrollHeight){
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
}

Thanks @arjun27 , it worked for the given example. I appreciate your help. Will try with some other examples and let you know how I go.

This project looks interesting, anyway I can contribute to the project? Say some doco, tutorial etc?