Screenshot an area of interest

[przemyslawpluta]

It would be great if there would be an option to be able to screenshot an area of interest something like:

window.selectArea(x, y, w, h)

Then ...

page.screenshotArea({path: 'example.png'})

... and you'd end up with selected area only e.g.

So we'd scroll to the point and draw an area or interest for screenshot. Any plans for this type of behaviour?

[JoelEinbinder]

Screenshot takes a clip rectangle. You can use page.exposeFunction to add a screenshotArea function onto the window object of your page.

[ebidel]

Here's an example of taking a screenshot of a dom element, the logo on chromestatus.com:

// adjustments for this page (so we hit the desktop breakpoint)
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 2});

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

async function screenshotDOMElement(selector, padding = 0) {
  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);

  return 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
    }
  });
}

await screenshotDOMElement('header aside', 16);

[przemyslawpluta]

@ebidel thanks for this example. It's getting there but one issue with this is that you have to know the SELECTOR my example assumes that you don't know anything about the SELECTOR but you do know the coordinates on the page you'd like to see also the area you might want to screenshot might span across different elements of the website.

[ebidel]

Sure, just modify the snippet to take the coordinates directly :)

[przemyslawpluta]

@ebidel indeed ...

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    page.setViewport({ width: 1000, height: 600, deviceScaleFactor: 2 });
    await page.goto('https://www.chromestatus.com/samples', { waitUntil: 'networkidle' });
    await page.screenshot({
        path: 'element.png',
        clip: {x: 215, y: 0, width: 390, height: 50}
    });
    browser.close();

[wong2]

@ebidel why not add an selector option to screenshot api based on your screenshotDOMElement function?

[ebidel]

0.12.0 has a new screenshot API for elements! https://github.com/GoogleChrome/puppeteer/blob/v0.12.0/docs/api.md#elementhandlescreenshotoptions

…

On Sun, Oct 15, 2017, 1:31 AM Wang Dàpéng ***@***.***> wrote: @ebidel <https://github.com/ebidel> Could we make screenshotDOMElement an option of screenshot api: selector? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#306 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAOigCvuOdKXSdtkHif7kRYpfxcLchZHks5sscLngaJpZM4O5eAU> .

[MManchukonda]

Here's an example of taking a screenshot of a dom element, the logo on chromestatus.com:

// adjustments for this page (so we hit the desktop breakpoint)
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 2});

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

async function screenshotDOMElement(selector, padding = 0) {
  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);

  return 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
    }
  });
}

await screenshotDOMElement('header aside', 16);

How to take screenshot for Xpath?

[SuciuCalin]

Here's an example of taking a screenshot of a dom element, the logo on chromestatus.com:

// adjustments for this page (so we hit the desktop breakpoint)
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 2});

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

async function screenshotDOMElement(selector, padding = 0) {
  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);

  return 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
    }
  });
}

await screenshotDOMElement('header aside', 16);

How to take screenshot for Xpath?

This worked for me:

    /**
    * Selecting the element by xpath
    * page.$x() returns an array of ElementHandle.
    * We are only interested in the first element
    **/
    const elByXpath = (await page.$x(req.param('elXpath')))[0]

    const rect = await page.evaluate(element => {
        if (!element)
            return null;
        const {x, y, width, height} = element.getBoundingClientRect();
        return {left: x, top: y, width, height};
    }, elByXpath);

[mdshihabullah]

    const elByXpath = (await page.$x(req.param('elXpath')))[0]

    const rect = await page.evaluate(element => {
        if (!element)
            return null;
        const {x, y, width, height} = element.getBoundingClientRect();
        return {left: x, top: y, width, height};
    }, elByXpath);

Not working!

[tarkungZZ]

Here's an example of taking a screenshot of a dom element, the logo on chromestatus.com:

// adjustments for this page (so we hit the desktop breakpoint)
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 2});

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

async function screenshotDOMElement(selector, padding = 0) {
  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);

  return 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
    }
  });
}

await screenshotDOMElement('header aside', 16);

I'm using this it work well with selector outside frame or iframe but it can't find selector in frame or iframe.

Can you fix it for me pls.