Puppeteer example screenshoting the logo on chromestatus.com

puppeteer-dom-screenshot.js

// full example of screenshoting a DOM element
// using https://github.com/GoogleChrome/puppeteer

const PADDING = 16; // px
const SELECTOR = 'header aside'; // css selector for the element

// make sure we hit the desktop breakpoint
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 2});

await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});

const rect = await page.evaluate(selector => {
  const element = document.querySelector(selector);
  const {x, y, width, height} = element.getBoundingClientRect();
  return {left: x, top: y, width, height, id: element.id};
}, SELECTOR);

await page.screenshot({
  path: 'element.png',
  clip: {
    x: rect.left - PADDING,
    y: rect.top - PADDING,
    width: rect.width + PADDING * 2,
    height: rect.height + PADDING * 2
  }
});