Comprehensive Guide: How to Take Screenshot with Puppeteer Easily & Effectively

Table of Contents

Table of Contents

While web scraping, capturing screenshots can provide invaluable insights into the data extraction process, especially when debugging or verifying the output of headless browsers. Puppeteer, a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol, simplifies this task through its screenshot() method. This method can be applied to either page or element objects, allowing developers to capture the entire webpage or specific elements. This capability is particularly useful for visual verification, documentation, or even archiving web content. To further enhance your web scraping endeavors and ensure you’re extracting the most accurate and relevant data, integrating a powerful web scraping API can significantly elevate the efficiency and effectiveness of your projects.

const puppeteer = require('puppeteer');

async function run() {
  // usual browser startup:
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("");
    // wait for the selector appear on the page
    await page.screenshot({
      "type": "png", // can also be "jpeg" or "webp" (recommended)
      "path": "screenshot.png",  // where to save it
      "fullPage": true,  // will scroll down to capture everything if true

    // alternatively we can capture just a specific element:
    const element = await page.$("p");
    await element.screenshot({"path": "just-the-paragraph.png", "type": "png"});



⚠ Be aware that when scraping dynamic web pages, screenshots might be taken before the page has fully loaded. For more information, see How to wait for a page to load in Puppeteer?

Related Questions

Related Blogs

Using Puppeteer for web scraping often involves navigating modal popups, such as Javascript alerts that conceal content and display messages upon page load. For developers...
Web scraping with Puppeteer often involves dealing with pages that necessitate scrolling to the bottom to load additional content, a common feature of infinite-scrolling pages....
Data Parsing
While scraping, it’s not uncommon to find that certain page elements are visible in the web browser but not in our scraper. This phenomenon is...