feat(elementHandle): add boxModel method #2256
Conversation
docs/api.md
Outdated
| @@ -2191,6 +2192,17 @@ The method evaluates the XPath expression relative to the elementHandle. If ther | |||
|
|
|||
| This method returns the bounding box of the element (relative to the main frame), or `null` if the element is not visible. | |||
|
|
|||
| #### elementHandle.boxModel() | |||
| - returns: <[Promise]<?[Object]>> | |||
| - content <[Array]<[number]>> Content box, represented as a [quad](https://chromedevtools.github.io/devtools-protocol/tot/DOM#type-Quad). | |||
There was a problem hiding this comment.
Let's have an array of objects with{x, y} - that will be a more friendly format to work with.
test/elementhandle.spec.js
Outdated
| const elementHandle = await page.$('div'); | ||
| const box = await elementHandle.boxModel(); | ||
|
|
||
| expect(box.content).toEqual([10, 10, 110, 10, 110, 110, 10, 110]); |
There was a problem hiding this comment.
In what coordinates are the returned numbers? Can we have a test with nested frames to make the coordinate system clear?
| async boxModel() { | ||
| const result = await this._getBoxModel(); | ||
|
|
||
| if (!result) |
There was a problem hiding this comment.
nit: to my taste, i'd replace lines 164-168 with a one-liner:
return result ? result.model : null;There was a problem hiding this comment.
this is not relevant after my last change (moving to {x, y} representation)
lib/ElementHandle.js
Outdated
| if (!result) | ||
| return null; | ||
|
|
||
| return Object.keys(result.model).reduce((prev, key) => { |
There was a problem hiding this comment.
I'm sure this works, but I'm having hard times following the logic.
I'd rather have something more straight-forward here that outlines the shape of the returned object.
This will make it clear what we return (and also improves code grep'pability!)
return {
content: fromProtocolQuad(result.content),
padding: fromProtocolQuad(result.padding),
// ...
}
function fromProtocolQuad(protocolQuad) {
// ...
}
|
@aslushnikov - fixed everything. 10x! |
| @@ -52,6 +52,33 @@ module.exports.addTests = function({testRunner, expect}) { | |||
| }); | |||
| }); | |||
|
|
|||
| describe('ElementHandle.boxModel', function() { | |||
| it('should work', async({page, server}) => { | |||
| const leftTop = {x: 28, y: 260}; | |||
There was a problem hiding this comment.
I can't validate these numbers from just looking at the test. However, I played with the API and the functionality works as expected.
Let's land this as-is, I'll re-write the test in a follow-up.
There was a problem hiding this comment.
@aslushnikov - agree. Maybe I can add back the previous test (in addition to this one). It had a div with specific dimensions (so you can actually tell that the sizes are good. WDYT?
There was a problem hiding this comment.
@yanivefraim no worries, I came up with something I've just uploaded while playing with your patch. See #2287
|
Nice! Thx! |
Fixes #1357 - expose element's boxModel.
I wasn't sure how exactly do we want to represent
boxmodeldata, so I just represented it "as is": an object containing quads, exactly as it is represented in chromedevtools