How to take a screenshot of a page using puppeteer?

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

npm init -y

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

npm install puppeteer@5.0.0

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

{
  "name": "puppeteer-examples",
  "version": "1.0.0",
  "description": "Tutorial.tips - Puppeteer Example",
  "scripts": {
    "start": "node server.js"
  },
  "keywords": ["puppeteer"],
  "author": "Gulshan.saini@gmail.com",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^5.0.0"
  }
}

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

const puppeteer = require('puppeteer')

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.

const puppeteer = require('puppeteer')

// IIFE (Immediately Invoked Function Expression)
;(async () => {
  // Automation code goes here
})()

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.

const puppeteer = require('puppeteer')

// IIFE (Immediately Invoked Function Expression)
;(async () => {
  // launch browser instance
  const browser = await puppeteer.launch()
  // create new browser tab
  const page = await browser.newPage()
})()

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

const browser = await puppeteer.launch({ headless: false })

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

const puppeteer = require('puppeteer')

// IIFE (Immediately Invoked Function Expression)
;(async () => {
  // launch browser instance
  const browser = await puppeteer.launch()
  // create new browser tab
  const page = await browser.newPage()

  // open desired page
  await page.goto('https://google.com')
})()

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.

// take screenshot of page
await page.screenshot({ path: 'google.png' })

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

await browser.close()

Final code & Test

Below is the final code

const puppeteer = require('puppeteer')

// IIFE (Immediately Invoked Function Expression)
;(async () => {
  // launch browser instance
  const browser = await puppeteer.launch()
  // create new browser tab
  const page = await browser.newPage()

  // open desired page
  await page.goto('https://google.com')

  // take screenshot of page
  await page.screenshot({ path: 'google.png' })

  // close browser handle
  await browser.close()
})()

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

node screenshot.js

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

Output