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(firefox): properly round clip when doing element screenshots (#4001)

Browse Source 
Do clipping the same way we do it in Chromium.
This commit is contained in:
Andrey Lushnikov 2019-02-13 19:47:14 -08:00 committed by GitHub
parent 670d758dfe
commit 2275c3c0c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
experimental/puppeteer-firefox/lib/JSHandle.js
View File

@ -169,10 +169,10 @@ class ElementHandle extends JSHandle {
return await this._frame._page.screenshot(Object.assign({}, options, { return await this._frame._page.screenshot(Object.assign({}, options, {
clip: { clip: {
x: Math.round(clip.x), x: clip.x,
y: Math.round(clip.y), y: clip.y,
width: Math.round(clip.width), width: clip.width,
height: Math.round(clip.height), height: clip.height,
}, },
})); }));
} }

12
experimental/puppeteer-firefox/lib/Page.js
View File

@ -379,12 +379,22 @@ class Page extends EventEmitter {
const {data} = await this._session.send('Page.screenshot', { const {data} = await this._session.send('Page.screenshot', {
mimeType: getScreenshotMimeType(options), mimeType: getScreenshotMimeType(options),
fullPage: options.fullPage, fullPage: options.fullPage,
clip: options.clip, clip: processClip(options.clip),
}); });
const buffer = options.encoding === 'base64' ? data : Buffer.from(data, 'base64'); const buffer = options.encoding === 'base64' ? data : Buffer.from(data, 'base64');
if (options.path) if (options.path)
await writeFileAsync(options.path, buffer); await writeFileAsync(options.path, buffer);
return buffer; return buffer;
function processClip(clip) {
if (!clip)
return undefined;
const x = Math.round(clip.x);
const y = Math.round(clip.y);
const width = Math.round(clip.width + clip.x - x);
const height = Math.round(clip.height + clip.y - y);
return {x, y, width, height};
}
} }
async evaluate(pageFunction, ...args) { async evaluate(pageFunction, ...args) {

BIN
test/golden-firefox/screenshot-element-fractional-offset.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 B

4
test/puppeteer.spec.js
View File

@ -23,8 +23,8 @@ const YELLOW_COLOR = '\x1b[33m';
const RESET_COLOR = '\x1b[0m'; const RESET_COLOR = '\x1b[0m';
module.exports.addTests = ({testRunner, product, puppeteer, Errors, DeviceDescriptors}) => { module.exports.addTests = ({testRunner, product, puppeteer, Errors, DeviceDescriptors}) => {
const {describe, xdescribe, fdescribe, describe_fails_ffox} = testRunner; const {describe, xdescribe, fdescribe} = testRunner;
const {it, fit, xit, it_fails_ffox} = testRunner; const {it, fit, xit} = testRunner;
const {beforeAll, beforeEach, afterAll, afterEach} = testRunner; const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
const CHROME = product === 'Chromium'; const CHROME = product === 'Chromium';

4
test/screenshot.spec.js
View File

@ -15,7 +15,7 @@
*/ */
module.exports.addTests = function({testRunner, expect, product}) { module.exports.addTests = function({testRunner, expect, product}) {
const {describe, xdescribe, fdescribe, describe_fails_ffox} = testRunner; const {describe, xdescribe, fdescribe} = testRunner;
const {it, fit, xit, it_fails_ffox} = testRunner; const {it, fit, xit, it_fails_ffox} = testRunner;
const {beforeAll, beforeEach, afterAll, afterEach} = testRunner; const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
@ -230,7 +230,7 @@ module.exports.addTests = function({testRunner, expect, product}) {
const screenshot = await elementHandle.screenshot(); const screenshot = await elementHandle.screenshot();
expect(screenshot).toBeGolden('screenshot-element-fractional.png'); expect(screenshot).toBeGolden('screenshot-element-fractional.png');
}); });
it_fails_ffox('should work for an element with an offset', async({page}) => { it('should work for an element with an offset', async({page}) => {
await page.setContent('<div style="position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;"></div>'); await page.setContent('<div style="position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;"></div>');
const elementHandle = await page.$('div'); const elementHandle = await page.$('div');
const screenshot = await elementHandle.screenshot(); const screenshot = await elementHandle.screenshot();