How to Take Screenshots With Puppeteer?

Best practices

Ensure your Puppeteer environment is set up with the latest version to avoid compatibility issues with newer website technologies.
Use the fullPage: true option in the screenshot method for capturing the entire length of the page, which is useful for pages with dynamic content that changes height.
When capturing screenshots of specific elements, make sure the element is fully loaded by using page.waitForSelector before calling element.screenshot.
Optimize screenshot file sizes by specifying the type and quality options in the screenshot method, especially when dealing with high-resolution images.

// npm init -y
// npm install puppeteer 

const puppeteer = require('puppeteer');

(async () => { 
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://sandbox.oxylabs.io/products', {waitUntil: 'networkidle0'});

    // Set the screen size to a resolution you want
    await page.setViewport({width: 1920, height: 1080});

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

    // Viewport screenshot
    await page.screenshot({path: 'viewport.png'}); 

    // Element screenshot
    const product_card = await page.$('.product-card'); // Select element
    await product_card.screenshot({path: 'element.png'}); 

    await browser.close();
})();

Common issues

Ensure that the Puppeteer browser instance runs in headless mode to improve performance and reduce resource consumption during screenshot capture.
Adjust the viewport settings using page.setViewport() before taking screenshots to match the desired resolution and dimensions for accurate rendering.
Handle timeouts and navigation errors by implementing error handling around page.goto to ensure the page is accessible before taking screenshots.
For consistent results across different environments, set the --no-sandbox flag in the puppeteer.launch() options if running Puppeteer in a containerized or limited permission setting.

// Inorrect: Running Puppeteer without headless mode can consume more resources
const browser1 = await puppeteer.launch({headless: false});

// Correct: Run Puppeteer in headless mode for better performance
const browser1_fix = await puppeteer.launch({headless: true});


// Inorrect: Taking a screenshot without setting viewport, might not capture desired layout
await page.screenshot({path: 'example1.png'});

// Correct: Set viewport before taking a screenshot to ensure correct layout
await page.setViewport({width: 1920, height: 1080});
await page.screenshot({path: 'example1_fix.png'});


// Inorrect: No error handling for navigation, might fail silently
await page.goto('https://sandbox.oxylabs.io/404');

// Correct: Implement error handling to catch navigation issues
const response = await page.goto('https://sandbox.oxylabs.io/404');
if (!response.ok()) {
    console.log(`Error: HTTP status: ${response.status()}`);
}


// Inorrect: Running Puppeteer without --no-sandbox in restricted environments
const browser2 = await puppeteer.launch();

// Correct: Use --no-sandbox flag when running in non-privileged environments
const browser2_fix = await puppeteer.launch({args: ['--no-sandbox']});