Feature: improve boundingBox method at ElementHandle

[schelkun]

Current version of boundingBox is terribly coded as I think 😄 :
https://github.com/GoogleChrome/puppeteer/blob/master/lib/ElementHandle.js#L123

Look at DevTools method:
https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getBoxModel

DevTools method returns BoxModel:
https://chromedevtools.github.io/devtools-protocol/tot/DOM/#type-BoxModel

BoxModel contains:

• content
• padding
• border
• margin
• width
• height

1. Why we are calculating width and height? It's already calculated and returned by DevTools, but we have:

const width = Math.max(quad[0], quad[2], quad[4], quad[6]) - x;
const height = Math.max(quad[1], quad[3], quad[5], quad[7]) - y;

2. Puppeteer use only border position:

const quad = result.model.border;

What If I want to get content position? Or padding position or margin position? 😢

My advice is smth like that:

async boundingBox() {
  const result = await this._client.send('DOM.getBoxModel', {
    objectId: this._remoteObject.objectId
  }).catch(error => void debugError(error));

  if (!result)
    return null;

  const borderQuad = result.model.border;

  return {
    border: {
      x: Math.min(borderQuad[0], borderQuad[2], borderQuad[4], borderQuad[6]),
      y: Math.min(borderQuad[1], borderQuad[3], borderQuad[5], borderQuad[7]),
      width: Math.max(borderQuad[0], borderQuad[2], borderQuad[4], borderQuad[6]) - x,
      height: Math.max(borderQuad[1], borderQuad[3], borderQuad[5], borderQuad[7]) - y
    },
    // same for padding and margin
    width: result.model.width,
    height: result.model.height
  };
}

[JoelEinbinder]

Boxes can be rotated.

[schelkun]

@JoelEinbinder and what? Why we can't access full returned object from DevTools in puppeteer?

[schelkun]

@JoelEinbinder @aslushnikov what about content size? I can't get it with puppeteer.

[JoelEinbinder]

Right now bounding box is designed to match (getBoundingClientRect)[https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect].

I am curious as to what your use case is for getting the content size.

[schelkun]

@JoelEinbinder look at this method for example:

  async boundingBoxNew() {
    const {model} = await this._client.send('DOM.getBoxModel', {
      objectId: this._remoteObject.objectId
    });
    if (!model)
      throw new Error('Node is detached from document');

    const calculatePos = function(quad)  {
      const x = Math.min(quad[0], quad[2], quad[4], quad[6]);
      const y = Math.min(quad[1], quad[3], quad[5], quad[7]);
      return {
        x: x,
        y: y,
        width: Math.max(quad[0], quad[2], quad[4], quad[6]) - x,
        height: Math.max(quad[1], quad[3], quad[5], quad[7]) - y
      };
    };

    return {
      border: calculatePos(model.border),
      content: calculatePos(model.content),
      margin: calculatePos(model.margin),
      padding: calculatePos(model.padding),
      width: model.width,
      height: model.height
    };
  }

And this sample website and script:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({
        headless: false,
        timeout: 10000
    });

    const page = await browser.newPage();

    await page.setViewport({
        width: 1280,
        height: 800
    });

    await page.goto('https://schelkun.github.io/padding-link/index.html');

    const element = await page.$('.text');
    const oldBoundingBox = await element.boundingBox();

    console.log(oldBoundingBox);

    const newBoundingBox = await element.boundingBoxNew();

    console.log(newBoundingBox);
})();

As a result I can get real content position:

{ border: { x: 128, y: 36, width: 200, height: 58 },
  content: { x: 128, y: 56, width: 200, height: 18 },
  margin: { x: 128, y: 20, width: 1024, height: 90 },
  padding: { x: 128, y: 36, width: 200, height: 58 },
  width: 200,
  height: 58 }

Content position is very usefull for text select with mouse for example.