How to Capture Screenshots with Puppeteer In NodeJS

To Capture Screenshots with Puppeteer:

  1. Launch a Browser Instance
  2. Navigate to the Web Page
  3. Capture the Screenshot


Puppeteer is a powerful Node.js library that allows developers to control headless Chromium or Chrome browsers. One of its most useful features is the ability to capture screenshots of web pages programmatically. Whether you’re building a web scraper, automating testing, or just need to document a web page’s appearance, Puppeteer can help you achieve this with ease. In this article, we’ll walk you through the steps to take screenshots using Puppeteer.


Before we dive into the steps, you’ll need to ensure you have Puppeteer installed and a basic understanding of JavaScript and Node.js. If you haven’t already, you can install Puppeteer using npm:

npm install puppeteer

Now, let’s get started with capturing screenshots:

1. Initialize Puppeteer:

First, create a JavaScript or TypeScript file, and import the Puppeteer library:

const puppeteer = require('puppeteer');

2. Launch a Browser Instance:

Next, you’ll need to launch an instance of a headless Chromium browser using puppeteer.launch():

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // Your code for taking screenshots will go here
  await browser.close();

3. Navigate to the Web Page:

Before taking a screenshot, you need to navigate to the webpage you want to capture:

await page.goto('');

Replace '' with the URL of the webpage you want to capture.

Learn How to wait for N seconds in Puppeteer.

4. Capture the Screenshot:

Taking a screenshot in Puppeteer is as simple as calling the screenshot() method on a page object and specifying a file path:

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

This code will capture the screenshot and save it as ‘screenshot.png’ in the current directory.

5. Customize Screenshot Options:

Puppeteer provides various options for customizing your screenshots. Here are some common options you can use:

  • Full Page Screenshot:

To capture a full-page screenshot (including the entire page, even if it requires scrolling), use the fullPage option:

await page.screenshot({ path: 'fullpage.png', fullPage: true });
  • Clip a Specific Area:

You can capture a specific region of the page by specifying the clip option. For example, to capture a 800×600 pixel region starting from coordinates (100, 100):

await page.screenshot({ path: 'custom.png', clip: { x: 100, y: 100, width: 800, height: 600 } });

6. Handle Errors:

It’s essential to handle errors gracefully in your Puppeteer script. You can use try-catch blocks to handle exceptions that may occur during navigation or screenshot capture.

7. Close the Browser Instance:

Finally, make sure to close the browser instance when you’re done to free up system resources:

await browser.close();

Learn How to Minimize Puppeteer Browser Window To Tray


Capturing screenshots with Puppeteer is a valuable skill for web developers and testers. With Puppeteer’s straightforward API and powerful capabilities, you can automate the process of taking screenshots of web pages, helping you save time and improve your web-related projects. By following the steps outlined in this guide, you’ll be well on your way to mastering the art of web page screenshot capture with Puppeteer. Happy coding!

Photo from Unsplash

Related Posts

How to Minimize Puppeteer Browser Window To Tray

How to Minimize Puppeteer Browser Window To Tray

Puppeteer is a powerful tool for automating tasks in headless or non-headless web browsers using JavaScript. While Puppeteer is often used to perform actions within a browser,…

Intercepting Responses in Node.js with Puppeteer

Intercepting Responses in Node.js with Puppeteer

Introduction: Puppeteer is a powerful Node.js library that provides a high-level API for controlling headless Chrome or Chromium browsers. It’s widely used for web scraping, automated testing,…

Mastering React Component Re-rendering in Jest

Mastering React Component Re-rendering in Jest

In this hands-on guide, we’ll explore the art of optimizing React component re-rendering within Jest tests. By combining theory with practical coding examples, you’ll gain a deep…

Eliminating Nesting Loops in React Rendering

Eliminating Nesting Loops in React Rendering

React has ushered in a new era of web application development with its component-based structure, promoting code reusability and maintainability. But as projects evolve, achieving optimal performance…

Exploring Type and Interface Usage in TypeScript

Exploring Type and Interface Usage in TypeScript

TypeScript has gained immense popularity by bridging the gap between dynamic JavaScript and static typing. Two of its fundamental features, “Type” and “Interface,” play pivotal roles in…


A Comprehensive Guide to the JavaScript Intl API

Introduction In the world of web development, building applications that cater to a global audience is essential. Language, date, time, and number formatting can vary greatly across…

Leave a Reply

%d bloggers like this: