fix(input): clicking an element should take into account frame position (#971)

lib/ElementHandle.js

@@ -44,22 +44,22 @@ class ElementHandle extends JSHandle {
    * @return {!Promise<{x: number, y: number}>}
    */
   async _visibleCenter() {
-    const {center, error} = await this.executionContext().evaluate(element => {
+    const error = await this.executionContext().evaluate(element => {
       if (!element.ownerDocument.contains(element))
-        return {center: null, error: 'Node is detached from document'};
+        return 'Node is detached from document';
       if (element.nodeType !== HTMLElement.ELEMENT_NODE)
-        return {center: null, error: 'Node is not of type HTMLElement'};
+        return 'Node is not of type HTMLElement';
       element.scrollIntoViewIfNeeded();
-      const rect = element.getBoundingClientRect();
-      const center = {
-        x: (Math.max(rect.left, 0) + Math.min(rect.right, window.innerWidth)) / 2,
-        y: (Math.max(rect.top, 0) + Math.min(rect.bottom, window.innerHeight)) / 2
-      };
-      return {center, error: null};
     }, this);
     if (error)
       throw new Error(error);
-    return center;
+    const {model} = await this._client.send('DOM.getBoxModel', {
+      objectId: this._remoteObject.objectId
+    });
+    return {
+      x: (model.content[0] + model.content[4]) / 2,
+      y: (model.content[1] + model.content[5]) / 2
+    };
   }
 
   async hover() {

test/test.js

@@ -1696,6 +1696,27 @@ describe('Page', function() {
       await button.tap();
       expect(await page.evaluate(() => getResult())).toEqual(['Touchstart: 0', 'Touchend: 0']);
     }));
+    it('should click the button inside an iframe', SX(async function() {
+      await page.goto(EMPTY_PAGE);
+      await page.setContent('<div style="width:100px;height:100px">spacer</div>');
+      const FrameUtils = require('./frame-utils');
+      await FrameUtils.attachFrame(page, 'button-test', PREFIX + '/input/button.html');
+      const frame = page.frames()[1];
+      const button = await frame.$('button');
+      await button.click();
+      expect(await frame.evaluate(() => window.result)).toBe('Clicked');
+    }));
+    it('should click the button with deviceScaleFactor set', SX(async function() {
+      await page.setViewport({width: 400, height: 400, deviceScaleFactor: 5});
+      expect(await page.evaluate(() => window.devicePixelRatio)).toBe(5);
+      await page.setContent('<div style="width:100px;height:100px">spacer</div>');
+      const FrameUtils = require('./frame-utils');
+      await FrameUtils.attachFrame(page, 'button-test', PREFIX + '/input/button.html');
+      const frame = page.frames()[1];
+      const button = await frame.$('button');
+      await button.click();
+      expect(await frame.evaluate(() => window.result)).toBe('Clicked');
+    }));
     function dimensions() {
       const rect = document.querySelector('textarea').getBoundingClientRect();
       return {