Full page screenshot not rendering correctly

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();
})();

example

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

Issue Analytics

State:
Created 4 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

19reactions

arjunattamcommented, Jan 24, 2020

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);
    });
  });
}

0reactions

davidricardo1026commented, Dec 2, 2022

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?

overflow-y: initial !important; the default overflow will affect the fullscreen args