fix: apply OOPIF offsets to bounding box and box model calls (#7906)

The doc for boundingBox says that it should return the boundingBox relative to the main frame, therefore, this fix would make the actual implementation correspond to the documentation. boxModel documentation does not have this note but I think it'd make sense to have it match the behaviour of the boundingBox API.
puppeteer · Jan 17, 2022 · a566263 · a566263
1 parent d7937b8
commit a566263
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 28 deletions.
diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts
@@ -88,6 +88,12 @@ export function createJSHandle(
   return new JSHandle(context, context._client, remoteObject);
 }
 
+const applyOffsetsToQuad = (
+  quad: Array<{ x: number; y: number }>,
+  offsetX: number,
+  offsetY: number
+) => quad.map((part) => ({ x: part.x + offsetX, y: part.y + offsetY }));
+
 /**
  * Represents an in-page JavaScript object. JSHandles can be created with the
  * {@link Page.evaluateHandle | page.evaluateHandle} method.
@@ -469,27 +475,11 @@ export class ElementHandle<
     if (error) throw new Error(error);
   }
 
-  /**
-   * Returns the middle point within an element unless a specific offset is provided.
-   */
-  async clickablePoint(offset?: Offset): Promise<Point> {
-    const [result, layoutMetrics] = await Promise.all([
-      this._client
-        .send('DOM.getContentQuads', {
-          objectId: this._remoteObject.objectId,
-        })
-        .catch(debugError),
-      this._page.client().send('Page.getLayoutMetrics'),
-    ]);
-    if (!result || !result.quads.length)
-      throw new Error('Node is either not clickable or not an HTMLElement');
-    // Filter out quads that have too small area to click into.
-    // Fallback to `layoutViewport` in case of using Firefox.
-    const { clientWidth, clientHeight } =
-      layoutMetrics.cssLayoutViewport || layoutMetrics.layoutViewport;
+  private async _getOOPIFOffsets(
+    frame: Frame
+  ): Promise<{ offsetX: number; offsetY: number }> {
     let offsetX = 0;
     let offsetY = 0;
-    let frame = this._frame;
     while (frame.parentFrame()) {
       const parent = frame.parentFrame();
       if (!frame.isOOPFrame()) {
@@ -511,11 +501,31 @@ export class ElementHandle<
       offsetY += topLeftCorner.y;
       frame = parent;
     }
+    return { offsetX, offsetY };
+  }
+
+  /**
+   * Returns the middle point within an element unless a specific offset is provided.
+   */
+  async clickablePoint(offset?: Offset): Promise<Point> {
+    const [result, layoutMetrics] = await Promise.all([
+      this._client
+        .send('DOM.getContentQuads', {
+          objectId: this._remoteObject.objectId,
+        })
+        .catch(debugError),
+      this._page.client().send('Page.getLayoutMetrics'),
+    ]);
+    if (!result || !result.quads.length)
+      throw new Error('Node is either not clickable or not an HTMLElement');
+    // Filter out quads that have too small area to click into.
+    // Fallback to `layoutViewport` in case of using Firefox.
+    const { clientWidth, clientHeight } =
+      layoutMetrics.cssLayoutViewport || layoutMetrics.layoutViewport;
+    const { offsetX, offsetY } = await this._getOOPIFOffsets(this._frame);
     const quads = result.quads
       .map((quad) => this._fromProtocolQuad(quad))
-      .map((quad) =>
-        quad.map((part) => ({ x: part.x + offsetX, y: part.y + offsetY }))
-      )
+      .map((quad) => applyOffsetsToQuad(quad, offsetX, offsetY))
       .map((quad) =>
         this._intersectQuadWithViewport(quad, clientWidth, clientHeight)
       )
@@ -860,13 +870,14 @@ export class ElementHandle<
 
     if (!result) return null;
 
+    const { offsetX, offsetY } = await this._getOOPIFOffsets(this._frame);
     const quad = result.model.border;
     const x = Math.min(quad[0], quad[2], quad[4], quad[6]);
     const y = Math.min(quad[1], quad[3], quad[5], quad[7]);
     const width = Math.max(quad[0], quad[2], quad[4], quad[6]) - x;
     const height = Math.max(quad[1], quad[3], quad[5], quad[7]) - y;
 
-    return { x, y, width, height };
+    return { x: x + offsetX, y: y + offsetY, width, height };
   }
 
   /**
@@ -882,12 +893,30 @@ export class ElementHandle<
 
     if (!result) return null;
 
+    const { offsetX, offsetY } = await this._getOOPIFOffsets(this._frame);
+
     const { content, padding, border, margin, width, height } = result.model;
     return {
-      content: this._fromProtocolQuad(content),
-      padding: this._fromProtocolQuad(padding),
-      border: this._fromProtocolQuad(border),
-      margin: this._fromProtocolQuad(margin),
+      content: applyOffsetsToQuad(
+        this._fromProtocolQuad(content),
+        offsetX,
+        offsetY
+      ),
+      padding: applyOffsetsToQuad(
+        this._fromProtocolQuad(padding),
+        offsetX,
+        offsetY
+      ),
+      border: applyOffsetsToQuad(
+        this._fromProtocolQuad(border),
+        offsetX,
+        offsetY
+      ),
+      margin: applyOffsetsToQuad(
+        this._fromProtocolQuad(margin),
+        offsetX,
+        offsetY
+      ),
       width,
       height,
     };

diff --git a/test/oopif.spec.ts b/test/oopif.spec.ts
@@ -282,7 +282,7 @@ describeChromeOnly('OOPIF', function () {
     expect(oopIframe.childFrames()).toHaveLength(0);
   });
 
-  it('clickablePoint should work for elements inside OOPIFs', async () => {
+  it('clickablePoint, boundingBox, boxModel should work for elements inside OOPIFs', async () => {
     const { server } = getTestState();
     await page.goto(server.EMPTY_PAGE);
     const framePromise = page.waitForFrame((frame) => {
@@ -311,6 +311,21 @@ describeChromeOnly('OOPIF', function () {
     const result = await button.clickablePoint();
     expect(result.x).toBeGreaterThan(150); // padding + margin + border left
     expect(result.y).toBeGreaterThan(150); // padding + margin + border top
+    const resultBoxModel = await button.boxModel();
+    for (const quad of [
+      resultBoxModel.content,
+      resultBoxModel.border,
+      resultBoxModel.margin,
+      resultBoxModel.padding,
+    ]) {
+      for (const part of quad) {
+        expect(part.x).toBeGreaterThan(150); // padding + margin + border left
+        expect(part.y).toBeGreaterThan(150); // padding + margin + border top
+      }
+    }
+    const resultBoundingBox = await button.boundingBox();
+    expect(resultBoundingBox.x).toBeGreaterThan(150); // padding + margin + border left
+    expect(resultBoundingBox.y).toBeGreaterThan(150); // padding + margin + border top
   });
 
   it('should detect existing OOPIFs when Puppeteer connects to an existing page', async () => {