Last active
July 29, 2024 05:58
-
Star
(139)
You must be signed in to star a gist -
Fork
(21)
You must be signed in to fork a gist
-
-
Save shospodarets/b4e8284e42fdaeceab9a67a9b0263743 to your computer and use it in GitHub Desktop.
Chrome headless Puppeteer- capture DOM element screenshot using
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(); | |
})(); |
This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists.
it not take screenshot from dom and result for me is a screenshot forom another section of page?
it not take screenshot from dom and result for me is a screenshot forom another section of page?
Can you please provide more details?
Thanks, @malyw. It works.
This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists.
Excelent!!
const el = await page.$('#miDiv');
el.screenshot({ path: 'capture.png'});
Wow thank you @malyw
This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists.
Excelent!!
const el = await page.$('#miDiv');
el.screenshot({ path: 'capture.png'});
I love it!
thanks @malyw
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
worked perfectly!