Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Full page screenshot not rendering correctly

See original GitHub issue

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