Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 1, 2021 10:28 am GMT

How to capture screenshots with Puppeteer.

This is my first article in 2021. Recently, I got a task to capture screenshots of 300+ web pages and while doing this I learned Puppeteer APIs. In this article, I would like to share my experience with Puppeteer.

Before, I start with writing code. Let me explain to you about Puppeteer in short.

What is Puppeteer.

Puppeteer is a Node library backed by Google. It provides a high-level API to control headless Chrome or Chromium by using DevTools protocols. This means with Puppeteer we can capture screenshots and PDFs of web pages, run our e2e test cases, and diagnose performance-related issues, etc.

Let's write some code...

Installation

To use puppeteer, you need to install the Node.js module through npm or yarn.

npm i puppeteer
Enter fullscreen mode Exit fullscreen mode

Note: When you install Puppeteer, it downloads a recent version of Chromium so it may take a long time based on you're network speed.

Capture GitHub profile screenshot

Here, is the bare minimum code for capturing a screenshot of my GitHub profile.

// require fs and puppeteerconst fs = require("fs");const puppeteer = require("puppeteer");async function captureScreenshot() {  // if screenshots directory is not exist then create one  if (!fs.existsSync("screenshots")) {    fs.mkdirSync("screenshots");  }  let browser = null;  try {    // launch headless Chromium browser    browser = await puppeteer.launch({ headless: true });    // create new page object    const page = await browser.newPage();    // set viewport width and height    await page.setViewport({ width: 1440, height: 1080 });    await page.goto("https://github.com/sagar-gavhane");    // capture screenshot and store it into screenshots directory.    await page.screenshot({ path: `screenshots/github-profile.jpeg` });  } catch (err) {    console.log(` Error: ${err.message}`);  } finally {    await browser.close();    console.log(`
GitHub profile screenshots captured.`
); }}captureScreenshot();
Enter fullscreen mode Exit fullscreen mode

Capture multiple screenshots

What if you've to take screenshots of many web pages with a puppeteer. Below is a list of pages defined in the pages.json file.

[  {    "id": "c1472465-ede8-4376-853c-39274242aa69",    "url": "https://github.com/microsoft/vscode",    "name": "VSCode"  },  {    "id": "6b08743e-9454-4829-ab3a-91ad2ce9a6ac",    "url": "https://github.com/vuejs/vue",    "name": "vue"  },  {    "id": "08923d12-caf2-4d5e-ba41-3019a9afbf9b",    "url": "https://github.com/tailwindlabs/tailwindcss",    "name": "tailwindcss"  },  {    "id": "daeacf42-1ab9-4329-8f41-26e7951b69cc",    "url": "https://github.com/getify/You-Dont-Know-JS",    "name": "You Dont Know JS"  }]
Enter fullscreen mode Exit fullscreen mode

I just tweaked the above captureScreenshot() function to iterate over pages array and on every iteration visit page.url and capture screenshot. That's it.

const fs = require("fs");const puppeteer = require("puppeteer");const pages = require("./pages.json");async function captureMultipleScreenshots() {  if (!fs.existsSync("screenshots")) {    fs.mkdirSync("screenshots");  }  let browser = null;  try {    // launch headless Chromium browser    browser = await puppeteer.launch({      headless: true,    });    // create new page object    const page = await browser.newPage();    // set viewport width and height    await page.setViewport({      width: 1440,      height: 1080,    });    for (const { id, name, url } of pages) {      await page.goto(url);      await page.screenshot({ path: `screenshots/${id}.jpeg` });      console.log(` ${name} - (${url})`);    }  } catch (err) {    console.log(` Error: ${err.message}`);  } finally {    if (browser) {      await browser.close();    }    console.log(`
${pages.length} screenshots captured.`); }}captureMultipleScreenshots();
Enter fullscreen mode Exit fullscreen mode

Terminal output

terminal screenshot

References

  1. https://pptr.dev/
  2. https://github.com/puppeteer/puppeteer/blob/v5.5.0/docs/api.md

Original Link: https://dev.to/sagar/how-to-capture-screenshots-with-puppeteer-3mb2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To