From 260e4282275ab1d05c86e5643e2a02c01f269a9c Mon Sep 17 00:00:00 2001 From: Alex Rudenko Date: Wed, 7 Sep 2022 07:27:40 +0200 Subject: [PATCH] fix: support scale for screenshot clips (#8908) Closes #5329 --- docs/api/puppeteer.screenshotclip.md | 13 +++++++------ docs/api/puppeteer.screenshotclip.scale.md | 13 +++++++++++++ src/common/Page.ts | 17 ++++++++++++----- .../screenshot-clip-rect-scale2.png | Bin 0 -> 8472 bytes test/src/screenshot.spec.ts | 16 ++++++++++++++++ 5 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 docs/api/puppeteer.screenshotclip.scale.md create mode 100644 test/golden-chromium/screenshot-clip-rect-scale2.png diff --git a/docs/api/puppeteer.screenshotclip.md b/docs/api/puppeteer.screenshotclip.md index 545f7baecc0ba..a5e82a01bb125 100644 --- a/docs/api/puppeteer.screenshotclip.md +++ b/docs/api/puppeteer.screenshotclip.md @@ -12,9 +12,10 @@ export interface ScreenshotClip ## Properties -| Property | Modifiers | Type | Description | -| ---------------------------------------------- | --------- | ------ | ----------- | -| [height](./puppeteer.screenshotclip.height.md) | | number | | -| [width](./puppeteer.screenshotclip.width.md) | | number | | -| [x](./puppeteer.screenshotclip.x.md) | | number | | -| [y](./puppeteer.screenshotclip.y.md) | | number | | +| Property | Modifiers | Type | Description | +| ---------------------------------------------- | --------- | ------ | ----------------- | +| [height](./puppeteer.screenshotclip.height.md) | | number | | +| [scale?](./puppeteer.screenshotclip.scale.md) | | number | (Optional) | +| [width](./puppeteer.screenshotclip.width.md) | | number | | +| [x](./puppeteer.screenshotclip.x.md) | | number | | +| [y](./puppeteer.screenshotclip.y.md) | | number | | diff --git a/docs/api/puppeteer.screenshotclip.scale.md b/docs/api/puppeteer.screenshotclip.scale.md new file mode 100644 index 0000000000000..e61e30671a322 --- /dev/null +++ b/docs/api/puppeteer.screenshotclip.scale.md @@ -0,0 +1,13 @@ +--- +sidebar_label: ScreenshotClip.scale +--- + +# ScreenshotClip.scale property + +**Signature:** + +```typescript +interface ScreenshotClip { + scale?: number; +} +``` diff --git a/src/common/Page.ts b/src/common/Page.ts index 213094ce8b7d7..ab3a2a2c824a2 100644 --- a/src/common/Page.ts +++ b/src/common/Page.ts @@ -163,6 +163,10 @@ export interface ScreenshotClip { y: number; width: number; height: number; + /** + * @defaultValue 1 + */ + scale?: number; } /** @@ -3012,7 +3016,12 @@ export class Page extends EventEmitter { const result = await this.#client.send('Page.captureScreenshot', { format, quality: options.quality, - clip, + clip: clip + ? { + ...clip, + scale: clip.scale === undefined ? 1 : clip.scale, + } + : undefined, captureBeyondViewport, fromSurface, }); @@ -3044,14 +3053,12 @@ export class Page extends EventEmitter { } return buffer; - function processClip( - clip: ScreenshotClip - ): ScreenshotClip & {scale: number} { + function processClip(clip: ScreenshotClip): ScreenshotClip { 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, scale: 1}; + return {x, y, width, height, scale: clip.scale}; } } diff --git a/test/golden-chromium/screenshot-clip-rect-scale2.png b/test/golden-chromium/screenshot-clip-rect-scale2.png new file mode 100644 index 0000000000000000000000000000000000000000..d713d279439265b0abf6460c8c4a5726e2b8ffed GIT binary patch literal 8472 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 z zzA?s%m2^^ty!UxaUd9ke-}g90Tx~dybIiBH9rtO>l>7HUZ&LPlcIE$5S(n{;PyxIc z(DD0Sfd4H|+5ZUge*<4RdyD;p1o_i8;PrrxD-yLg@2T^c)0==hB2t#ukSmrkfBzpG CZOnrJ literal 0 HcmV?d00001 diff --git a/test/src/screenshot.spec.ts b/test/src/screenshot.spec.ts index 0ef8669ebf1b8..85ef96b203af6 100644 --- a/test/src/screenshot.spec.ts +++ b/test/src/screenshot.spec.ts @@ -52,6 +52,22 @@ describe('Screenshots', function () { }); expect(screenshot).toBeGolden('screenshot-clip-rect.png'); }); + itFailsFirefox('should use scale for clip', async () => { + const {page, server} = getTestState(); + + await page.setViewport({width: 500, height: 500}); + await page.goto(server.PREFIX + '/grid.html'); + const screenshot = await page.screenshot({ + clip: { + x: 50, + y: 100, + width: 150, + height: 100, + scale: 2, + }, + }); + expect(screenshot).toBeGolden('screenshot-clip-rect-scale2.png'); + }); itFailsFirefox( 'should get screenshot bigger than the viewport', async () => {