[Answers](https://scrapfly.io/blog) / [headless-browser](https://scrapfly.io/blog/tag/headless-browser) / [How to take a screenshot with Puppeteer?](https://scrapfly.io/blog/answers/how-to-take-screenshot-with-puppeteer) # How to take a screenshot with Puppeteer? by [Bernardas Alisauskas](https://scrapfly.io/blog/author/bernardas) Oct 28, 2022 3 min read [\#headless-browser](https://scrapfly.io/blog/tag/headless-browser) [\#puppeteer](https://scrapfly.io/blog/tag/puppeteer) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-take-screenshot-with-puppeteer "Share on LinkedIn") Capturing screenshots while web scraping has different popular use cases, including competitor monitoring, AI vision analysis, and web pages' archiving. In this guide, we'll explain taking screenshots with Puppeteer. Furthermore, we'll explore common functonalities to customize a Puppeteer screenhot. Let's get started! ## Installation Let's start with the installation process. [Puppeteer](https://www.npmjs.com/package/puppeteer) is a NodeJS package that's can be installed with the node package manager using the following command: shell```shell npm install puppeteer ``` The above command will install Puppeteer and download the requried WebDriver binaries. To verify the instalaltion, use the below command and yo should retrieve the installed Puppeteer package version: shell```shell npm list puppeteer # └── puppeteer@23.2.1 ``` ## Basic Usage Let's start with the baseic functionalties enabling Puppeteer screenshots. For this, we can use the [page.screenshot() method](https://pptr.dev/api/puppeteer.page.screenshot): javascript```javascript const puppeteer = require("puppeteer"); async function run() { // launch the browser, disable the headless mode, and open a page tab const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); // request the target web page await page.goto("https://web-scraping.dev/product/1"); // take the screenshot await page.screenshot({ type: "png", // specify the file extension path: "product.png", // specify the file path }); browser.close(); } run(); ``` Above, we take a basic Puppeteer screenshot with the default settings in terms of the viewport and specify the file name and extension. Since taking screenshots is usually associated with dynamic websites, it's often useful to define waits to ensure a correct page load first: javascript```javascript async function run() { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.goto("https://web-scraping.dev/product/1"); // wait for a CSS selector element await page.waitForSelector("h3.card-title", {timeout: 5_000}); await page.screenshot({ type: "png", path: "product.png", }); browser.close(); } ``` Here, we [wait for gull page load](https://scrapfly.io/blog/answers/how-to-wait-for-page-to-load-in-puppeteer) using the `waitForSelector` method to ensure the HTML element load before starting with the screenshot process. ## Screenshot Customization So far, we have explored taking Puppeteer screenshots with the default preferences. Next, let's see how to customize the screenshot page. Scrapfly #### Need a cloud browser for scraping? Run headless browsers at scale with Scrapfly Cloud Browser — no infrastructure to manage. [Try Free →](https://scrapfly.io/register)### Resolution One of the key settings to define when capturing screenshots is the resolution. This allows customizing the image quality using its height and width dimensions: javascript```javascript async function run() { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); // Set the dimesions via width and height await page.setViewport({ width: 1920, height: 1080}); await page.goto("https://web-scraping.dev/product/1"); await page.screenshot({ type: "png", path: "product.png", }); browser.close(); } ``` Above, we use the `setViewport` method to set the width and height values to emulate a 1080p web page screenshot. ### Full Page Screenshot Taking a full page screenshot can be approached by replicating the whole page viewport. However, in Pupepteer we can simply use the `fullPage` parameter: javascript```javascript // .... await page.screenshot({ type: "png", path: "product.png", fullPage: true }); ``` Note that the above parameter won't allow Puppeteer to screenshot full pages with infinite scroll. Therefore, the browser should [handle infinite scroll](https://scrapfly.io/blog/answers/how-to-scroll-to-the-bottom-with-puppeteer) first before taking the web page capture. ### Element Screenshot Instead of taking a screenshot with Puppeteer for the whole page viewport, we can capture screenshots of a particular html element: javascript```javascript async function run() { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.setViewport({ width: 1920, height: 1080}); await page.goto("https://web-scraping.dev/product/5"); // select the element using a css selector const element = await page.$("div.product-data"); await element.screenshot({path: "element-screenshot.png", type: "png"}); browser.close(); } ``` Here's what the retrieved Pupepteer screenshot looks like: For further details on web scraping with Puppeteer, refer to our dedicated guide. Need screenshots at production scale? Use a [Screenshot API](https://scrapfly.io/screenshot-api) service. Our [screenshot API roundup](https://scrapfly.io/blog/posts/what-is-the-best-screenshot-api) helps you pick the right one. Table of Contents- [Installation](#installation) - [Basic Usage](#basic-usage) - [Screenshot Customization](#screenshot-customization) - [Resolution](#resolution) - [Full Page Screenshot](#full-page-screenshot) - [Element Screenshot](#element-screenshot) Join the Newsletter Get monthly web scraping insights Scale Your Web Scraping Anti-bot bypass, browser rendering, and rotating proxies, all in one API. Start with 1,000 free credits. No credit card required 1,000 free API credits Anti-bot bypass included [Start Free](https://scrapfly.io/register) [View Docs](https://scrapfly.io/docs/onboarding) Not ready? Get our newsletter instead. ## Explore this Article with AI [ ChatGPT ](https://chat.openai.com/?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-take-screenshot-with-puppeteer) [ Gemini ](https://www.google.com/search?udm=50&aep=11&q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-take-screenshot-with-puppeteer) [ Grok ](https://x.com/i/grok?text=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-take-screenshot-with-puppeteer) [ Perplexity ](https://www.perplexity.ai/search/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-take-screenshot-with-puppeteer) [ Claude ](https://claude.ai/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-take-screenshot-with-puppeteer) ## Related Articles [ python headless-browser ### How To Take Screenshots In Python? Learn how to take Python screenshots through Selenium and Playwright, including common browser tips and tricks for custo... ](https://scrapfly.io/blog/posts/how-to-take-screenshots-in-python) [ http nodejs ### Web Scraping With NodeJS and Javascript In this article we'll take a look at scraping using Javascript through NodeJS. We'll cover common web scraping libraries... ](https://scrapfly.io/blog/posts/web-scraping-with-nodejs) [ screenshots ### How to Automate Website Screenshots with Python & JavaScript Learn how to automate Chrome screenshots with Playwright, Selenium, Puppeteer, browser commands, extensions, and APIs fo... ](https://scrapfly.io/blog/posts/how-to-automate-chrome-screenshots) ## Related Questions - [ Q How to take screenshots in NodeJS? ](https://scrapfly.io/blog/answers/how-to-take-screenshots-nodejs) - [ Q How to take a screenshot with Playwright? ](https://scrapfly.io/blog/answers/how-to-take-screenshot-with-playwright) - [ Q How to take a screenshot with Selenium? ](https://scrapfly.io/blog/answers/how-to-take-screenshot-with-selenium) - [ Q How to block resources in Puppeteer? ](https://scrapfly.io/blog/answers/how-to-block-resources-in-puppeteer) Run headless browsers at scale, **1,000 free credits** [Start Free](https://scrapfly.io/register)