github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ElementHandle.screenshot): account for scroll (#1323)

Browse Source 
Currently, `elementHandle.screenshot` passes bounding box into the `page.captureScreenshot` 
method.
This is wrong since `captureScreenshot` accepts viewport, not bounding box.

This patch uses layout metrics to convert bounding box into viewport.

Fixes #1315.
This commit is contained in:
Christopher Dieringer 2017-11-10 16:02:52 -08:00 committed by Andrey Lushnikov
parent 2c8f658815
commit b0b22199f9
3 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/ElementHandle.js
View File

@ -144,12 +144,16 @@ class ElementHandle extends JSHandle {
*/
async screenshot(options = {}) {
await this._scrollIntoViewIfNeeded();
const { layoutViewport: { pageX, pageY } } = await this._client.send('Page.getLayoutMetrics');
const boundingBox = await this.boundingBox();
if (!boundingBox)
throw new Error('Node is not visible');
const clip = Object.assign({}, boundingBox);
clip.x += pageX;
clip.y += pageY;
return await this._page.screenshot(Object.assign({}, {
clip: boundingBox
clip
}, options));
}

BIN
test/golden/screenshot-element-scrolled-into-view.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

23
test/test.js
View File

@ -1796,6 +1796,29 @@ describe('Page', function() {
const screenshot = await elementHandle.screenshot();
expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
}));
it('should scroll element into view', SX(async function() {
await page.setViewport({width: 500, height: 500});
await page.setContent(`
something above
<style>div.above {
border: 2px solid blue;
background: red;
height: 1500px;
}
div.to-screenshot {
border: 2px solid blue;
background: green;
width: 50px;
height: 50px;
}
</style>
<div class="above"></div>
<div class="to-screenshot"></div>
`);
const elementHandle = await page.$('div.to-screenshot');
const screenshot = await elementHandle.screenshot();
expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png');
}));
it('should work with a rotated element', SX(async function() {
await page.setViewport({width: 500, height: 500});
await page.setContent(`<div style="position:absolute;