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 0000000000000..d713d27943926 Binary files /dev/null and b/test/golden-chromium/screenshot-clip-rect-scale2.png differ 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 () => {