Table of content

Screenshot in Puppeteer

We can capture screenshot of the webpage using screenshot() function present in Puppeteer. Puppeteer not only provides the capability to take a screenshot but also provides option how the screenshot should be.

Simple Program to take a screenshot in Puppeteer as an image file.

const puppeteer = require('puppeteer');
async function run(){
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage();
    await page.goto('https://chercher.tech');
    await page.screenshot({path: 'screenshot_of_ChercherTech.png'});
    await browser.close();
}
run()
screenshot_of_ChercherTech

Full page screenshot in Puppeteer:

If you see the above screenshot, you might get to know that Puppeteer has captured only the viewable area. But sometimes we might need to take a screenshot of the complate page including the scrollable areas.

To capture complete/full page screenshot then we need to set the fullPage property as true.

const puppeteer = require('puppeteer');
async function run(){
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage();
    await page.goto('https://chercher.tech');
    await page.screenshot({path: 'Full_screenshot_of_ChercherTech.png', fullPage:true});
    await browser.close();
}
run()

The full page screenshot.

Full_screenshot_of_ChercherTech

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions