test: detach frame while clicking race (#10029)

tests/page/page-click.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { test as it, expect } from './pageTest';
-import { attachFrame } from '../config/utils';
+import { attachFrame, detachFrame } from '../config/utils';
 
 async function giveItAChanceToClick(page) {
   for (let i = 0; i < 5; i++)
@@ -820,3 +820,31 @@ it('should retry when navigating during the click', async ({ page, server, mode
   const error = await page.click('button', { __testHookBeforeStable, timeout: 2000 } as any).catch(e => e);
   expect(error.message).toContain('element was detached from the DOM, retrying');
 });
+
+it('should not hang when frame is detached', async ({ page, server, mode }) => {
+  it.skip(mode !== 'default');
+
+  await attachFrame(page, 'frame1', server.EMPTY_PAGE);
+  const frame = page.frames()[1];
+  await frame.goto(server.PREFIX + '/input/button.html');
+
+  // Start moving the button.
+  await frame.$eval('button', button => {
+    button.style.transition = 'margin 5s linear 0s';
+    button.style.marginLeft = '200px';
+  });
+
+  let detachPromise;
+  const __testHookBeforeStable = () => {
+    // Detach the frame after "waiting for stable" has started.
+    setTimeout(() => {
+      detachPromise = detachFrame(page, 'frame1');
+    }, 1000);
+  };
+  const promise = frame.click('button', { __testHookBeforeStable } as any).catch(e => e);
+
+  await detachPromise;
+  const error = await promise;
+  expect(error).toBeTruthy();
+  expect(error.message).toMatch(/frame got detached|Frame was detached/);
+});