Puppeteer screenshot element, page or area

1. Puppeteer screenshot page
2. Puppeteer screenshot element
3. Puppeteer screenshot area

Puppeteer screenshot page

Puppeteer has a special method for taking a screenshot: screenshot (). For example, if we want to capture an image of google.com, then we can do it as follows:

const puppeteer = require('puppeteer');           // include lib
(async () => {                                    // declare function
  const browser = await puppeteer.launch();       // run browser
  const page = await browser.newPage();           // open new tab
  await page.goto('https://google.com');          // go to site
  await page.screenshot({path: 'google.png'});    // take screenshot in puppeteer and saving the image to google.png
  await browser.close();                          // close browser
}
})();

As a result of the execution of this code in the directory with the script, we will have an image with the name google.png:

If the site page is large and has scrolls, then in order to take a full screenshot, you need to pass the fullPage parameter with the value true to the screenshot() method:

const puppeteer = require('puppeteer');           // include lib
(async () => {                                    // declare function
  const browser = await puppeteer.launch();       // run browser
  const page = await browser.newPage();           // open new tab
  await page.goto('https://google.com');          // go to site
  await page.screenshot({path: 'google.png', fullPage: true});    // take screenshot of the full page without scrolling in puppeteer
  await browser.close();                          // close browser
}
})();

Puppeteer screenshot element

But what if we need to take in puppeteer screenshot element only? For example, google logo? This can be done using the screenshot() method of ElementHandle.

First, let’s define the name of our element selector. To do this, hover the mouse over the logo, right-click and select “View code” in the context menu (or press Ctrl+Shift+I) that appears:

The developer panel will open on the right, where you will see the page code. The desired part will already be highlighted. Hover the mouse over it, right-click and select Copy – Copy selector:

The clipboard will be: #hplogo. This is the name of the selector we require. Now we will get a screenshot of the element we need. Let’s change the previous example:

const puppeteer = require('puppeteer');           // include lib
(async () => {                                    // declare function
  const browser = await puppeteer.launch();       // run browser
  const page = await browser.newPage();           // open new tab
  await page.goto('https://google.com');          // go to site

  // Далее #hplogo - требуемый нам селектор
  await page.waitForSelector('#hplogo');          // wait for the selector to load
  const element = await page.$('#hplogo');        // declare a variable with an ElementHandle
  await element.screenshot({path: 'google.png'}); // take screenshot element in puppeteer
  await browser.close();                          // close browser
})();

In the folder with the script, we will have a file logo.png:

Puppeteer screenshot area

Another way to get in puppeteer screenshot element is to pass the clip parameter with the coordinates of the element to the screenshot() function:

const puppeteer = require('puppeteer');
(async () => {                                      // declare function
  const browser = await puppeteer.launch();         // run browser
  const page = await browser.newPage();             // open new tab
  await page.goto('https://google.com');            // go to site

  // #hplogo - selector
  await page.waitForSelector('#hplogo');             // wait for the selector to load
  const logo = await page.$('#hplogo');              // declare a variable with an ElementHandle
  const box = await logo.boundingBox();              // this method returns an array of geometric parameters of the element in pixels.
  const x = box['x'];                                // coordinate x
  const y = box['y'];                                // coordinate y
  const w = box['width'];                            // area width
  const h = box['height'];                           // area height
  await page.screenshot({'path': 'logo.png', 'clip': {'x': x, 'y': y, 'width': w, 'height': h}});     // take screenshot of the required area in puppeteer
  await browser.close();                             // close browser
})();

Similarly, you can get with puppeteer screenshot area if you know the coordinates and sizes of this area by passing them in the clip option:

await page.screenshot({'path': 'field.png', 'clip': {'x': 75, 'y': 50, 'width': 100, 'height': 50}});