fix: support scale for screenshot clips (#8908)

Closes #5329

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 | <i>(Optional)</i> |
+| [width](./puppeteer.screenshotclip.width.md)   |           | number |                   |
+| [x](./puppeteer.screenshotclip.x.md)           |           | number |                   |
+| [y](./puppeteer.screenshotclip.y.md)           |           | number |                   |

docs/api/puppeteer.screenshotclip.scale.md

@@ -0,0 +1,13 @@
+---
+sidebar_label: ScreenshotClip.scale
+---
+
+# ScreenshotClip.scale property
+
+**Signature:**
+
+```typescript
+interface ScreenshotClip {
+  scale?: number;
+}
+```

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};
     }
   }
 

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 () => {