Take a screenshot with Puppeteer

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 and npm.

Before getting any further, please check the official documentation 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:

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:

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.

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:

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