Скриншот элемента, страницы или области в Puppeteer

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
}
})();


// Если страница сайта большая и имеет прокрутки, то для того, чтобы сделать полноценный скриншот, нужно передать методу screenshot() параметр fullPage со значением true :

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
}
})();

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
})();

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
})();

// Точно так же вы можете получить с помощью puppeteer область скриншота, если знаете координаты и размеры этой области, передав их в опции clip :
await page.screenshot({'path': 'field.png', 'clip': {'x': 75, 'y': 50, 'width': 100, 'height': 50}});