Forked from shospodarets/Chrome headless Puppeteer- capture DOM element screenshot using
Created
September 17, 2017 17:52
-
-
Save HZ-labs/f64d027456d270a7609231c206c36e2e to your computer and use it in GitHub Desktop.
Capture DOM element screenshot using Chrome headless
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const puppeteer = require('puppeteer'); | |
(async () => { | |
const browser = await puppeteer.launch(); | |
const page = await browser.newPage(); | |
// Adjustments particular to this page to ensure we hit desktop breakpoint. | |
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1}); | |
await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'}); | |
/** | |
* Takes a screenshot of a DOM element on the page, with optional padding. | |
* | |
* @param {!{path:string, selector:string, padding:(number|undefined)}=} opts | |
* @return {!Promise<!Buffer>} | |
*/ | |
async function screenshotDOMElement(opts = {}) { | |
const padding = 'padding' in opts ? opts.padding : 0; | |
const path = 'path' in opts ? opts.path : null; | |
const selector = opts.selector; | |
if (!selector) | |
throw Error('Please provide a selector.'); | |
const rect = await page.evaluate(selector => { | |
const element = document.querySelector(selector); | |
if (!element) | |
return null; | |
const {x, y, width, height} = element.getBoundingClientRect(); | |
return {left: x, top: y, width, height, id: element.id}; | |
}, selector); | |
if (!rect) | |
throw Error(`Could not find element that matches selector: ${selector}.`); | |
return await page.screenshot({ | |
path, | |
clip: { | |
x: rect.left - padding, | |
y: rect.top - padding, | |
width: rect.width + padding * 2, | |
height: rect.height + padding * 2 | |
} | |
}); | |
} | |
await screenshotDOMElement({ | |
path: 'element.png', | |
selector: 'header aside', | |
padding: 16 | |
}); | |
browser.close(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment