Feature: improve boundingBox method at ElementHandle #1357
Description
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
- 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;- 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
};
}