mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
chore: remove handle.boxModel API (#36)
This commit is contained in:
parent
653b4b9df3
commit
cf97e2c140
20
docs/api.md
20
docs/api.md
@ -254,7 +254,6 @@
|
||||
* [elementHandle.$x(expression)](#elementhandlexexpression)
|
||||
* [elementHandle.asElement()](#elementhandleaselement)
|
||||
* [elementHandle.boundingBox()](#elementhandleboundingbox)
|
||||
* [elementHandle.boxModel()](#elementhandleboxmodel)
|
||||
* [elementHandle.click([options])](#elementhandleclickoptions)
|
||||
* [elementHandle.contentFrame()](#elementhandlecontentframe)
|
||||
* [elementHandle.dblclick([options])](#elementhandledblclickoptions)
|
||||
@ -3370,25 +3369,6 @@ 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]<[Object]>> Content box.
|
||||
- x <[number]>
|
||||
- y <[number]>
|
||||
- padding <[Array]<[Object]>> Padding box.
|
||||
- x <[number]>
|
||||
- y <[number]>
|
||||
- border <[Array]<[Object]>> Border box.
|
||||
- x <[number]>
|
||||
- y <[number]>
|
||||
- margin <[Array]<[Object]>> Margin box.
|
||||
- x <[number]>
|
||||
- y <[number]>
|
||||
- width <[number]> Element's width.
|
||||
- height <[number]> Element's height.
|
||||
|
||||
This method returns boxes of the element, or `null` if the element is not visible. Boxes are represented as an array of points; each Point is an object `{x, y}`. Box points are sorted clock-wise.
|
||||
|
||||
#### elementHandle.click([options])
|
||||
- `options` <[Object]>
|
||||
- `button` <"left"|"right"|"middle"> Defaults to `left`.
|
||||
|
||||
@ -412,23 +412,6 @@ export class ElementHandle extends JSHandle {
|
||||
return {x, y, width, height};
|
||||
}
|
||||
|
||||
async boxModel(): Promise<BoxModel | null> {
|
||||
const result = await this._getBoxModel();
|
||||
|
||||
if (!result)
|
||||
return null;
|
||||
|
||||
const {content, padding, border, margin, width, height} = result.model;
|
||||
return {
|
||||
content: this._fromProtocolQuad(content),
|
||||
padding: this._fromProtocolQuad(padding),
|
||||
border: this._fromProtocolQuad(border),
|
||||
margin: this._fromProtocolQuad(margin),
|
||||
width,
|
||||
height
|
||||
};
|
||||
}
|
||||
|
||||
async screenshot(options: any = {}): Promise<string | Buffer> {
|
||||
let needsViewportReset = false;
|
||||
|
||||
@ -567,12 +550,3 @@ function computeQuadArea(quad) {
|
||||
}
|
||||
return Math.abs(area);
|
||||
}
|
||||
|
||||
type BoxModel = {
|
||||
content: {x: number, y: number}[],
|
||||
padding: {x: number, y: number}[],
|
||||
border: {x: number, y: number}[],
|
||||
margin: {x: number, y: number}[],
|
||||
width: number,
|
||||
height : number
|
||||
};
|
||||
|
||||
@ -366,12 +366,3 @@ function computeQuadArea(quad) {
|
||||
}
|
||||
return Math.abs(area);
|
||||
}
|
||||
|
||||
type BoxModel = {
|
||||
content: {x: number, y: number}[],
|
||||
padding: {x: number, y: number}[],
|
||||
border: {x: number, y: number}[],
|
||||
margin: {x: number, y: number}[],
|
||||
width: number,
|
||||
height : number
|
||||
};
|
||||
|
||||
@ -69,69 +69,6 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
|
||||
});
|
||||
});
|
||||
|
||||
describe.skip(FFOX || WEBKIT)('ElementHandle.boxModel', function() {
|
||||
it('should work', async({page, server}) => {
|
||||
await page.goto(server.PREFIX + '/resetcss.html');
|
||||
|
||||
// Step 1: Add Frame and position it absolutely.
|
||||
await utils.attachFrame(page, 'frame1', server.PREFIX + '/resetcss.html');
|
||||
await page.evaluate(() => {
|
||||
const frame = document.querySelector('#frame1');
|
||||
frame.style = `
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 2px;
|
||||
`;
|
||||
});
|
||||
|
||||
// Step 2: Add div and position it absolutely inside frame.
|
||||
const frame = page.frames()[1];
|
||||
const divHandle = (await frame.evaluateHandle(() => {
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
div.style = `
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
border-left: 1px solid black;
|
||||
padding-left: 2px;
|
||||
margin-left: 3px;
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
width: 6px;
|
||||
height: 7px;
|
||||
`;
|
||||
return div;
|
||||
})).asElement();
|
||||
|
||||
// Step 3: query div's boxModel and assert box values.
|
||||
const box = await divHandle.boxModel();
|
||||
expect(box.width).toBe(6);
|
||||
expect(box.height).toBe(7);
|
||||
expect(box.margin[0]).toEqual({
|
||||
x: 1 + 4, // frame.left + div.left
|
||||
y: 2 + 5,
|
||||
});
|
||||
expect(box.border[0]).toEqual({
|
||||
x: 1 + 4 + 3, // frame.left + div.left + div.margin-left
|
||||
y: 2 + 5,
|
||||
});
|
||||
expect(box.padding[0]).toEqual({
|
||||
x: 1 + 4 + 3 + 1, // frame.left + div.left + div.marginLeft + div.borderLeft
|
||||
y: 2 + 5,
|
||||
});
|
||||
expect(box.content[0]).toEqual({
|
||||
x: 1 + 4 + 3 + 1 + 2, // frame.left + div.left + div.marginLeft + div.borderLeft + dif.paddingLeft
|
||||
y: 2 + 5,
|
||||
});
|
||||
});
|
||||
|
||||
it('should return null for invisible elements', async({page, server}) => {
|
||||
await page.setContent('<div style="display:none">hi</div>');
|
||||
const element = await page.$('div');
|
||||
expect(await element.boxModel()).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
describe.skip(WEBKIT)('ElementHandle.contentFrame', function() {
|
||||
it('should work', async({page,server}) => {
|
||||
await page.goto(server.EMPTY_PAGE);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user