CODEWITHSUNDEEP
node.jspuppeteergoogle-chrome-headless
JsFan
JsFan

Reputation: 443

Node puppeteer take screenshot full page SPA

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

Upvotes: 32

Views: 36628

Answers (2)

Hemant
Hemant

Reputation: 1018

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

Upvotes: 37

Taylor Krusen
Taylor Krusen

Reputation: 1043

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

Upvotes: 15

Related Questions