fix: support clip in ElementHandle.screenshot (#12115)

docs/api/puppeteer.screenshotoptions.md

@@ -68,7 +68,7 @@ clip
 
 </td><td>
 
-Specifies the region of the page to clip.
+Specifies the region of the page/element to clip.
 
 </td><td>
 

packages/puppeteer-core/src/api/ElementHandle.ts

@@ -1236,9 +1236,9 @@ export abstract class ElementHandle<
     this: ElementHandle<Element>,
     options: Readonly<ElementScreenshotOptions> = {}
   ): Promise<string | Buffer> {
-    const {scrollIntoView = true} = options;
+    const {scrollIntoView = true, clip} = options;
 
-    let clip = await this.#nonEmptyVisibleBoundingBox();
+    let elementClip = await this.#nonEmptyVisibleBoundingBox();
 
     const page = this.frame.page();
 
@@ -1247,7 +1247,7 @@ export abstract class ElementHandle<
       await this.scrollIntoViewIfNeeded();
 
       // We measure again just in case.
-      clip = await this.#nonEmptyVisibleBoundingBox();
+      elementClip = await this.#nonEmptyVisibleBoundingBox();
     }
 
     const [pageLeft, pageTop] = await this.evaluate(() => {
@@ -1259,10 +1259,16 @@ export abstract class ElementHandle<
         window.visualViewport.pageTop,
       ] as const;
     });
-    clip.x += pageLeft;
-    clip.y += pageTop;
+    elementClip.x += pageLeft;
+    elementClip.y += pageTop;
+    if (clip) {
+      elementClip.x += clip.x;
+      elementClip.y += clip.y;
+      elementClip.height = clip.height;
+      elementClip.width = clip.width;
+    }
 
-    return await page.screenshot({...options, clip});
+    return await page.screenshot({...options, clip: elementClip});
   }
 
   async #nonEmptyVisibleBoundingBox() {

packages/puppeteer-core/src/api/Page.ts

@@ -274,7 +274,7 @@ export interface ScreenshotOptions {
    */
   path?: string;
   /**
-   * Specifies the region of the page to clip.
+   * Specifies the region of the page/element to clip.
    */
   clip?: ScreenshotClip;
   /**

test/src/screenshot.spec.ts

@@ -393,6 +393,33 @@ describe('Screenshots', function () {
 
       await context.close();
     });
+
+    it('should use element clip', async () => {
+      const {page} = await getTestState();
+
+      await page.setViewport({width: 500, height: 500});
+      await page.setContent(`
+        something above
+        <style>div {
+          border: 2px solid blue;
+          background: green;
+          width: 50px;
+          height: 50px;
+        }
+        </style>
+        <div></div>
+      `);
+      using elementHandle = (await page.$('div'))!;
+      const screenshot = await elementHandle.screenshot({
+        clip: {
+          x: 10,
+          y: 10,
+          width: 20,
+          height: 20,
+        },
+      });
+      expect(screenshot).toBeGolden('screenshot-element-clip.png');
+    });
   });
 
   describe('Cdp', () => {