Screenshot in Puppeteer

Table of content

• Screenshot in Puppeteer

We can capture a screenshot of the webpage using screenshot() function present in Puppeteer. Puppeteer not only provides the capability to take a screenshot but also provides options on 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()

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 complete page including the scrollable areas.

To capture a 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.

iFrames in Puppeteer

Recommended Readings

• PDF the HTML in Puppeteer
• Cucumber with Puppeteer and Javascript
• iFrames in Puppeteer
• GeoLocations Puppeteer
• Puppeteer Interview Questions
• Disable JavaScript in Puppeteer
• Emulate Mobile with Puppeteer
• WebElement Operations in Puppeteer

I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.