From 1d6feb2ab8ef4ff876e48634100f3a4bc6c3af82 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 9 Mar 2021 07:44:10 -0800
Subject: [PATCH] fix(inspect): highlight on explore input change (#5726)

---
 src/server/supplements/recorderSupplement.ts |  4 ++--
 test/pause.spec.ts                           | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/server/supplements/recorderSupplement.ts b/src/server/supplements/recorderSupplement.ts
index 097dd360d7..95fccaa0a3 100644
--- a/src/server/supplements/recorderSupplement.ts
+++ b/src/server/supplements/recorderSupplement.ts
@@ -204,7 +204,7 @@ export class RecorderSupplement {
 
     await this._context.exposeBinding('_playwrightRecorderState', false, source => {
       let snapshotUrl: string | undefined;
-      let actionSelector: string | undefined;
+      let actionSelector = this._highlightedSelector;
       let actionPoint: Point | undefined;
       if (this._hoveredSnapshot) {
         const metadata = this._allMetadatas.get(this._hoveredSnapshot.callLogId)!;
@@ -214,7 +214,7 @@ export class RecorderSupplement {
         for (const [metadata, sdkObject] of this._currentCallsMetadata) {
           if (source.page === sdkObject.attribution.page) {
             actionPoint = metadata.point || actionPoint;
-            actionSelector = metadata.params.selector || actionSelector;
+            actionSelector = actionSelector || metadata.params.selector;
           }
         }
       }
diff --git a/test/pause.spec.ts b/test/pause.spec.ts
index 841e9bd814..6ce9ed8f21 100644
--- a/test/pause.spec.ts
+++ b/test/pause.spec.ts
@@ -270,6 +270,24 @@ describe('pause', (suite, { mode }) => {
     await recorderPage.click('[title=Resume]');
     await scriptPromise;
   });
+
+  it('should highlight on explore', async ({ page, recorderPageGetter }) => {
+    await page.setContent('<button>Submit</button>');
+    const scriptPromise = (async () => {
+      await page.pause();
+    })();
+    const recorderPage = await recorderPageGetter();
+    const [element] = await Promise.all([
+      page.waitForSelector('x-pw-highlight:visible'),
+      recorderPage.fill('input[placeholder="Playwright Selector"]', 'text=Submit'),
+    ]);
+    const button = await page.$('text=Submit');
+    const box1 = await element.boundingBox();
+    const box2 = await button.boundingBox();
+    expect(box1).toEqual(box2);
+    await recorderPage.click('[title=Resume]');
+    await scriptPromise;
+  });
 });
 
 async function sanitizeLog(recorderPage: Page): Promise<string[]> {