ElementHandle screenshot does not count padding (or add options to count the padding/margin)

[entrptaher]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 0.12.0-alpha
• Platform / OS version:
• URLs (if applicable): http://example.com

What steps will reproduce the problem?
Take screenshot using ElementHandler.

Please include code that reproduces the issue.

await page.goto("http://example.com");
const title = await page.$('h1');
const screenshot = await title.screenshot({path: "justTitle.png"});

What is the expected result?
Take screenshot of the highlighted area as from chrome. When I mean highlighted, I mean the margin/padding.

What happens instead?

[ebidel]

I've meant to file the same bug :) To screenshot just the element, it's a bit painful right now. You need to figure out the element margin and adjust theclip property accordingly.

It would be nice for us to provide an option. For now, here's a workaround that works for me:

await page.goto("http://example.com");
const title = await page.$('h1');

const styles = await page.evaluate(el => window.getComputedStyle(el), title);

const clip = Object.assign({}, await title.boundingBox());
clip.y += parseFloat(styles.marginTop) || 0;
clip.x += parseFloat(styles.marginLeft) || 0;

const screenshot = await title.screenshot({path: "tweet.png", clip});