test(click): add a test for 'Element has moved' exception (#2017)

src/dom.ts

@@ -240,6 +240,8 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     point.x = (point.x * 100 | 0) / 100;
     point.y = (point.y * 100 | 0) / 100;
     await this._page.mouse.move(point.x, point.y);  // Force any hover effects before waiting for hit target.
+    if (options && (options as any).__testHookBeforeWaitForHitTarget)
+      await (options as any).__testHookBeforeWaitForHitTarget();
     if (!force)
       await this._waitForHitTargetAt(point, deadline);
 
@@ -437,7 +439,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
       const element = await frame.frameElement();
       const box = await element.boundingBox();
       if (!box)
-        throw new Error('Element is not attached to the DOM');
+        throw new NotConnectedError();
       // Translate from viewport coordinates to frame coordinates.
       point = { x: point.x - box.x, y: point.y - box.y };
     }

test/assets/input/animating-button.html

@@ -21,4 +21,14 @@
   if (remove)
     button.remove();
 }
+function startJumping() {
+  const button = document.querySelector('button');
+  let x = 0;
+  const moveIt = () => {
+    x += 300;
+    button.style.marginLeft = x + 'px';
+    requestAnimationFrame(moveIt);
+  };
+  moveIt();
+}
 </script>

test/click.spec.js

@@ -571,6 +571,21 @@ describe('Page.click', function() {
     expect(clicked).toBe(true);
     expect(await page.evaluate(() => window.clicked)).toBe(true);
   });
+  it('should fail when element moves during hit testing', async({page, server}) => {
+    await page.goto(server.PREFIX + '/input/animating-button.html');
+    await page.evaluate(() => addButton());
+    let clicked = false;
+    const handle = await page.$('button');
+    const __testHookBeforeWaitForHitTarget = () => page.evaluate(() => startJumping());
+    const promise = handle.click({ timeout: 0, __testHookBeforeWaitForHitTarget }).then(() => clicked = true).catch(e => e);
+    expect(clicked).toBe(false);
+    expect(await page.evaluate(() => window.clicked)).toBe(undefined);
+    await page.evaluate(() => stopButton());
+    const error = await promise;
+    expect(clicked).toBe(false);
+    expect(error.message).toBe('Element has moved during the action');
+    expect(await page.evaluate(() => window.clicked)).toBe(undefined);
+  });
   it('should fail when element is blocked on hover', async({page, server}) => {
     await page.setContent(`<style>
       container { display: block; position: relative; width: 200px; height: 50px; }