An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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
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();
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" }]
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();
Terminal output
References
Original Link: https://dev.to/sagar/how-to-capture-screenshots-with-puppeteer-3mb2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To