Take a screenshot with Puppeteer
Published: 2023-02-15 09:07:48

In this article, I am going to talk about how to take a screenshot with Puppeteer.

## Pre-requisites

To use Puppeteer to take screenshots of web pages, you have to follow these steps:

First, you need to install [nodejs](https://nodejs.org/en/) and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

Before getting any further, please check the [official documentation](https://github.com/puppeteer/puppeteer#usage) to check your version compatibility.


## How to take a screenshot with Puppeteer?

- Create a browser instance and a new page.
- Adjust the viewport height to take a screenshot of the page.
- Declare a variable for the website URL we want to take a screenshot.
- To navigate our URL, use the `goto()` method from the page instance.
- To capture a screenshot, call the screenshot method from the page instance by mentioning the output path.
- As the screenshot is captured, as a final step, close the browser instance.


The source code for capturing a screenshot:
```
const puppeteer = require('puppeteer');

(async () => {
  // Creating a browser instance
  const browser = await puppeteer.launch();

  // Creating a new page
  const page = await browser.newPage();

  // Adjusting width and height of the viewport
  await page.setViewport({ width: 1200, height: 600 });

  const url = 'https://dev.to/makepad/use-emojis-in-your-commit-messages-1lag';

  // Open URL in current page
  await page.goto(url);

  // Capture screenshot
  await page.screenshot({
    path: 'demo.png',
  });

  // Close the browser instance
  await browser.close();
})();
```


You can execute the code by running `node index.js` in your command line and your output will be similar to this: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5qmf9695smowt07zelf.png)

This is fine if you want to take a screenshot of the websites with nothing to scroll because the code takes a screenshot of the page as it is displayed. 

## How can we modify our code to take a full-page screenshot? 

To capture a full page, we need to add a `fullPage:true` option for `page.screenshot()`

```
  await page.screenshot({
    path: 'demo.png',
    fullPage: true
  });
```
After updating our code, the output should be similar to the following:  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su3sko24ruuc48rv6utk.png)

## How to take a screenshot of a particular HTML element?

Right-click any part of the page and choose Inspect. Clicking a specific page element will open that element in the inspector view. After finding the HTML element, you want to take a screenshot of, right-click the highlighted HTML code and click Copy > Copy Selector. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l28mc8iojtudh3zkbgx.png)


In this example this is the selector that I copied: `#main-title > div.crayons-article__header__meta`

### Let's modify our code ! 

First, we need to declare a variable for the selector. Then, we will ask the page to wait for our selector. Lastly, as we want to take a screenshot of the element, we need to change `await page.screenshot` to `await html_element.screenshot`.

The source code for capturing a screenshot of an HTML element: 

```
const puppeteer = require('puppeteer');

// Declaring a variable for the selector that we copied
const selector = `#main-title > div.crayons-article__header__meta`;

(async () => {
  // Creating a browser instance
  const browser = await puppeteer.launch();

  // Creating a new page
  const page = await browser.newPage();

  // Adjusting width and height of the viewport
  await page.setViewport({ width: 1200, height: 600 });

  const url = 'https://dev.to/makepad/use-emojis-in-your-commit-messages-1lag';

  // Open URL in current page
  await page.goto(url);
  await page.waitForSelector(selector);

  //We will ask the page to wait our selector
  const html_element = await page.$(selector);

  // Capture screenshot
  await html_element.screenshot({
    path: 'demo.png',
  });

  // Close the browser instance
  await browser.close();
})();
```
After updating our code, the output should be similar to to the following: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bqlwx0uc04dyl1yflp6.png)

**Conclusion**
I explained few Puppeteer screenshot examples, and I hope I helped you solve your screenshot problems with Puppeteer.