27

I have a single page application with scrolling. I am trying to take a screenshot of the whole page, but it only gives me the visible part. How can I make it shoot the whole page?

  const browser = await puppeteer.launch(options);
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path: 'page.png', fullPage: true })
  await browser.close();
JsFan
  • 393
  • 2
  • 4
  • 13

2 Answers2

33

Actually what is happening here that your page might took a while to load in full. So we have to increase the timeout. And before taking screen shot take a short break of 500ms and then it will take full page screenshot. Try below code.

const puppeteer = require('puppeteer');

async function runTest() {
const browser = await puppeteer.launch({
    headless: false,
    timeout: 100000
});

const page = await browser.newPage();
const url = 'https://stackoverflow.com/questions/47616985/node-puppeteer-take-screenshot-full-page-spa';

await page.goto(url, {
    waitUntil: 'networkidle2'
});
await page.waitFor(500);

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

runTest();
Hemant Sankhla
  • 923
  • 12
  • 23
  • 3
    This is a great answer and sample! However, you don't need `page.waitFor` because you're making use of the `waitUntil` property, which is a perfect solution for this particular problem. – Taylor Krusen Jan 17 '19 at 18:28
  • 1
    FYI, waitFor method is deprecated, usages should be substituted with calls to more explicit methods eg. waitForSelector. see docs https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforselectororfunctionortimeout-options-args – Chris Neve Nov 29 '21 at 09:04
11

Your code looks correct. What are you passing in options?

Is the page actually launching? Try turning off headless browser to check:

const browser = await puppeteer.launch({
    headless: false
});

The following works for me to take a full page screenshot:

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

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

  browser.close();
}

run();
Taylor Krusen
  • 963
  • 6
  • 10