HomeTutorsContact

How to take a screenshot of a page using puppeteer?

By Gulshan Saini
Published in Puppeteer
July 04, 2020
2 min read

Puppeteer is the NodeJs library that provides API to automate Chrome or Chromium browsers. Puppeteer can be configured to run in headless and GUI mode. By default, puppeteer runs in headless mode.

Puppeteer can be used to interact with the webpage as a normal user would over the DevTools Protocol. In this tutorial, we are going to see how we can take a screenshot of a page using puppeteer.

Let’s start with a fresh project

Prerequisite Node 10.18.1+

Create a new project

Navigate to the desired directory and run below command to create a fresh project

Add puppeteer as a dependency

Puppeteer comes pre-installed with a recent version of Chromium. We will be using puppeteer version 5.0.0 as a dependency. To install puppeteer package as project dependency type following command and press enter

After installation, the package.json should look similar to following

Import Puppeteer as a dependency

First, we will create a new file screenshot.js and import puppeteer as dependency on the very first line as follows

Open a page using Puppeteer

Next, we create an IIFE (Immediately Invoked Function Expression) function that will contain code to run automation steps in a sequential manner using async/await keywords

async/await is only supported in Node v7.6.0 or greater.

The anonymous function inside IFFE is async as the await keyword works only inside async function.

Next, we will launch a browser instance and open a new tab as normally a user would do.

The await keyword tells the process to wait for the browser to launch before moving to next step.

As mentioned earlier the browser is launched in headless mode. To view the browser GUI on launch, we can pass option {headless: false} as launch() argument

Next, using the page handler we can open the desired page as follows

Taking screenshot

To generate a screenshot of a page using Puppeteer we can simply call page.screenshot() method which accepts options object. In options object, we can define path of screenshot by creating property path: 'google.png' as follows.

The screenshot type will be inferred from file extension. If path is a relative path, then it is resolved relative to current working directory. If no path is provided, the image won’t be saved to the disk.

Closing browser instance

The last thing to do is close the browser instance to by calling browser.close() method

Final code & Test

Below is the final code

To run the code, open a terminal window and navigate to project directory and type following command

After the script is finished you should see screenshot in current working directory named google.png

Output

Puppeteer Automatically Take Screenshot
Puppeteer Automatically Take Screenshot


Tags

#puppeteer
Previous Article
JavaScript check if time is between 9am and 6pm?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to get the text of element using puppeteer?

September 25, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media