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 comment has been minimized.
This comment has been minimized.
thanks a lot. |
This comment has been minimized.
This comment has been minimized.
The option
But after I change to "networkidle2", another error show up:
So I remove the option and everything works fine. |
This comment has been minimized.
This comment has been minimized.
worked perfectly! |
This comment has been minimized.
This comment has been minimized.
This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists. |
This comment has been minimized.
This comment has been minimized.
it not take screenshot from dom and result for me is a screenshot forom another section of page? |
This comment has been minimized.
This comment has been minimized.
Can you please provide more details? |
This comment has been minimized.
This comment has been minimized.
Thanks, @malyw. It works. |
This comment has been minimized.
This comment has been minimized.
Excelent!! const el = await page.$('#miDiv');
el.screenshot({ path: 'capture.png'}); |
This comment has been minimized.
This comment has been minimized.
Wow thank you @malyw |
This comment has been minimized.
This comment has been minimized.
I love it! |
This comment has been minimized.
This comment has been minimized.
thanks @malyw |
This comment has been minimized.
References:
cyrus-and/chrome-remote-interface#253 (comment)
https://github.com/GoogleChrome/puppeteer/pull/452/files