From d1d5fc67dc684a5d4b682749e59bba8cc0ad14de Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Fri, 20 Oct 2023 20:58:09 -0700
Subject: [PATCH] fix(recorder): show action point in main frame only (#27719)

---
 .../src/server/injected/highlight.ts          |  2 --
 .../src/server/injected/recorder.ts           |  6 +++++
 tests/library/inspector/pause.spec.ts         | 27 +++++++++++++------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/highlight.ts b/packages/playwright-core/src/server/injected/highlight.ts
index c0eb9a5390..9c3aa5eecb 100644
--- a/packages/playwright-core/src/server/injected/highlight.ts
+++ b/packages/playwright-core/src/server/injected/highlight.ts
@@ -130,8 +130,6 @@ export class Highlight {
     this._actionPointElement.style.top = y + 'px';
     this._actionPointElement.style.left = x + 'px';
     this._actionPointElement.hidden = false;
-    if (this._isUnderTest)
-      console.error('Action point for test: ' + JSON.stringify({ x, y })); // eslint-disable-line no-console
   }
 
   hideActionPoint() {
diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts
index 3ab2f9bd6b..734cbf0fcb 100644
--- a/packages/playwright-core/src/server/injected/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder.ts
@@ -545,6 +545,12 @@ export class PollingRecorder implements RecorderDelegate {
       this._pollRecorderModeTimer = setTimeout(() => this._pollRecorderMode(), pollPeriod);
       return;
     }
+    const win = this._recorder.document.defaultView!;
+    if (win.top !== win) {
+      // Only show action point in the main frame, since it is relative to the page's viewport.
+      // Otherwise we'll see multiple action points at different locations.
+      state.actionPoint = undefined;
+    }
     this._recorder.setUIState(state, this);
     this._pollRecorderModeTimer = setTimeout(() => this._pollRecorderMode(), pollPeriod);
   }
diff --git a/tests/library/inspector/pause.spec.ts b/tests/library/inspector/pause.spec.ts
index 860ff50fae..81147a2dd9 100644
--- a/tests/library/inspector/pause.spec.ts
+++ b/tests/library/inspector/pause.spec.ts
@@ -158,25 +158,36 @@ it.describe('pause', () => {
     await scriptPromise;
   });
 
-  it('should highlight pointer', async ({ page, recorderPageGetter }) => {
-    const actionPointPromise = waitForTestLog<{ x: number, y: number }>(page, 'Action point for test: ');
-    await page.setContent('<button>Submit</button>');
+  it('should highlight pointer, only in main frame', async ({ page, recorderPageGetter }) => {
+    await page.setContent(`
+      <iframe
+        style="margin: 100px;"
+        srcdoc="<button style='margin: 80px;'>Submit</button>">
+      </iframe>
+    `);
     const scriptPromise = (async () => {
       await page.pause();
-      await page.click('button');
+      await page.frameLocator('iframe').locator('button').click();
     })();
     const recorderPage = await recorderPageGetter();
     await recorderPage.click('[title="Step over (F10)"]');
 
-    const { x, y } = await actionPointPromise;
-    const button = await page.waitForSelector('button');
+    const iframe = page.frames()[1];
+    const button = await iframe.waitForSelector('button');
     const box1 = await button.boundingBox();
+    const actionPoint = await page.waitForSelector('x-pw-action-point');
+    const box2 = await actionPoint.boundingBox();
+
+    const iframeActionPoint = await iframe.$('x-pw-action-point');
+    expect(await iframeActionPoint?.boundingBox()).toBeFalsy();
 
     const x1 = box1.x + box1.width / 2;
     const y1 = box1.y + box1.height / 2;
+    const x2 = box2.x + box2.width / 2;
+    const y2 = box2.y + box2.height / 2;
 
-    expect(Math.abs(x1 - x) < 2).toBeTruthy();
-    expect(Math.abs(y1 - y) < 2).toBeTruthy();
+    expect(Math.abs(x1 - x2) < 2).toBeTruthy();
+    expect(Math.abs(y1 - y2) < 2).toBeTruthy();
 
     await recorderPage.click('[title="Resume (F8)"]');
     await scriptPromise;