fix(inspect): highlight on explore input change (#5726)

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;
           }
         }
       }

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[]> {