From 734705e9b3c0753a2f41b7664b9ab7c9a0798cb5 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Fri, 9 Jun 2023 07:18:13 -0700
Subject: [PATCH] chore: elementHandle getters implemented through Frame
 (#23557)

This is a step towards not using handles for locator operations.
---
 .../src/server/chromium/crPage.ts             |  2 +-
 .../dispatchers/elementHandlerDispatcher.ts   | 24 ++---
 packages/playwright-core/src/server/dom.ts    | 97 ++++++-------------
 .../src/server/firefox/ffPage.ts              |  6 +-
 packages/playwright-core/src/server/frames.ts | 79 +++++++--------
 packages/playwright-core/src/server/page.ts   |  2 +-
 .../src/server/trace/recorder/tracing.ts      |  6 +-
 .../src/server/webkit/wkPage.ts               |  2 +-
 tests/library/trace-viewer.spec.ts            | 47 +++++----
 9 files changed, 116 insertions(+), 149 deletions(-)

diff --git a/packages/playwright-core/src/server/chromium/crPage.ts b/packages/playwright-core/src/server/chromium/crPage.ts
index 4b93c1d410..c992d0632a 100644
--- a/packages/playwright-core/src/server/chromium/crPage.ts
+++ b/packages/playwright-core/src/server/chromium/crPage.ts
@@ -333,7 +333,7 @@ export class CRPage implements PageDelegate {
       injected.setInputFiles(node, files), files);
   }
 
-  async setInputFilePaths(handle: dom.ElementHandle<HTMLInputElement>, files: string[]): Promise<void> {
+  async setInputFilePaths(progress: Progress, handle: dom.ElementHandle<HTMLInputElement>, files: string[]): Promise<void> {
     const frame = await handle.ownerFrame();
     if (!frame)
       throw new Error('Cannot set input files to detached input element');
diff --git a/packages/playwright-core/src/server/dispatchers/elementHandlerDispatcher.ts b/packages/playwright-core/src/server/dispatchers/elementHandlerDispatcher.ts
index 7c7cc2e80b..e39e58ace3 100644
--- a/packages/playwright-core/src/server/dispatchers/elementHandlerDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/elementHandlerDispatcher.ts
@@ -66,54 +66,54 @@ export class ElementHandleDispatcher extends JSHandleDispatcher implements chann
   }
 
   async getAttribute(params: channels.ElementHandleGetAttributeParams, metadata: CallMetadata): Promise<channels.ElementHandleGetAttributeResult> {
-    const value = await this._elementHandle.getAttribute(params.name);
+    const value = await this._elementHandle.getAttribute(metadata, params.name);
     return { value: value === null ? undefined : value };
   }
 
   async inputValue(params: channels.ElementHandleInputValueParams, metadata: CallMetadata): Promise<channels.ElementHandleInputValueResult> {
-    const value = await this._elementHandle.inputValue();
+    const value = await this._elementHandle.inputValue(metadata);
     return { value };
   }
 
   async textContent(params: channels.ElementHandleTextContentParams, metadata: CallMetadata): Promise<channels.ElementHandleTextContentResult> {
-    const value = await this._elementHandle.textContent();
+    const value = await this._elementHandle.textContent(metadata);
     return { value: value === null ? undefined : value };
   }
 
   async innerText(params: channels.ElementHandleInnerTextParams, metadata: CallMetadata): Promise<channels.ElementHandleInnerTextResult> {
-    return { value: await this._elementHandle.innerText() };
+    return { value: await this._elementHandle.innerText(metadata) };
   }
 
   async innerHTML(params: channels.ElementHandleInnerHTMLParams, metadata: CallMetadata): Promise<channels.ElementHandleInnerHTMLResult> {
-    return { value: await this._elementHandle.innerHTML() };
+    return { value: await this._elementHandle.innerHTML(metadata) };
   }
 
   async isChecked(params: channels.ElementHandleIsCheckedParams, metadata: CallMetadata): Promise<channels.ElementHandleIsCheckedResult> {
-    return { value: await this._elementHandle.isChecked() };
+    return { value: await this._elementHandle.isChecked(metadata) };
   }
 
   async isDisabled(params: channels.ElementHandleIsDisabledParams, metadata: CallMetadata): Promise<channels.ElementHandleIsDisabledResult> {
-    return { value: await this._elementHandle.isDisabled() };
+    return { value: await this._elementHandle.isDisabled(metadata) };
   }
 
   async isEditable(params: channels.ElementHandleIsEditableParams, metadata: CallMetadata): Promise<channels.ElementHandleIsEditableResult> {
-    return { value: await this._elementHandle.isEditable() };
+    return { value: await this._elementHandle.isEditable(metadata) };
   }
 
   async isEnabled(params: channels.ElementHandleIsEnabledParams, metadata: CallMetadata): Promise<channels.ElementHandleIsEnabledResult> {
-    return { value: await this._elementHandle.isEnabled() };
+    return { value: await this._elementHandle.isEnabled(metadata) };
   }
 
   async isHidden(params: channels.ElementHandleIsHiddenParams, metadata: CallMetadata): Promise<channels.ElementHandleIsHiddenResult> {
-    return { value: await this._elementHandle.isHidden() };
+    return { value: await this._elementHandle.isHidden(metadata) };
   }
 
   async isVisible(params: channels.ElementHandleIsVisibleParams, metadata: CallMetadata): Promise<channels.ElementHandleIsVisibleResult> {
-    return { value: await this._elementHandle.isVisible() };
+    return { value: await this._elementHandle.isVisible(metadata) };
   }
 
   async dispatchEvent(params: channels.ElementHandleDispatchEventParams, metadata: CallMetadata): Promise<void> {
-    await this._elementHandle.dispatchEvent(params.type, parseArgument(params.eventInit));
+    await this._elementHandle.dispatchEvent(metadata, params.type, parseArgument(params.eventInit));
   }
 
   async scrollIntoViewIfNeeded(params: channels.ElementHandleScrollIntoViewIfNeededParams, metadata: CallMetadata): Promise<void> {
diff --git a/packages/playwright-core/src/server/dom.ts b/packages/playwright-core/src/server/dom.ts
index 52aa5caecf..51b34dba8a 100644
--- a/packages/playwright-core/src/server/dom.ts
+++ b/packages/playwright-core/src/server/dom.ts
@@ -192,55 +192,28 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return this._page._delegate.getContentFrame(this);
   }
 
-  async getAttribute(name: string): Promise<string | null> {
-    return throwRetargetableDOMError(await this.evaluateInUtility(([injected, node, name]) => {
-      if (node.nodeType !== Node.ELEMENT_NODE)
-        throw injected.createStacklessError('Node is not an element');
-      const element = node as unknown as Element;
-      return { value: element.getAttribute(name) };
-    }, name)).value;
+  async getAttribute(metadata: CallMetadata, name: string): Promise<string | null> {
+    return this._frame.getAttribute(metadata, ':scope', name, {}, this);
   }
 
-  async inputValue(): Promise<string> {
-    return throwRetargetableDOMError(await this.evaluateInUtility(([injected, node]) => {
-      const element = injected.retarget(node, 'follow-label');
-      if (!element || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT'))
-        throw injected.createStacklessError('Node is not an <input>, <textarea> or <select> element');
-      return { value: (element as HTMLInputElement | HTMLTextAreaElement).value };
-    }, undefined)).value;
+  async inputValue(metadata: CallMetadata): Promise<string> {
+    return this._frame.inputValue(metadata, ':scope', {}, this);
   }
 
-  async textContent(): Promise<string | null> {
-    return throwRetargetableDOMError(await this.evaluateInUtility(([injected, node]) => {
-      return { value: node.textContent };
-    }, undefined)).value;
+  async textContent(metadata: CallMetadata): Promise<string | null> {
+    return this._frame.textContent(metadata, ':scope', {}, this);
   }
 
-  async innerText(): Promise<string> {
-    return throwRetargetableDOMError(await this.evaluateInUtility(([injected, node]) => {
-      if (node.nodeType !== Node.ELEMENT_NODE)
-        throw injected.createStacklessError('Node is not an element');
-      if ((node as unknown as Element).namespaceURI !== 'http://www.w3.org/1999/xhtml')
-        throw injected.createStacklessError('Node is not an HTMLElement');
-      const element = node as unknown as HTMLElement;
-      return { value: element.innerText };
-    }, undefined)).value;
+  async innerText(metadata: CallMetadata): Promise<string> {
+    return this._frame.innerText(metadata, ':scope', {}, this);
   }
 
-  async innerHTML(): Promise<string> {
-    return throwRetargetableDOMError(await this.evaluateInUtility(([injected, node]) => {
-      if (node.nodeType !== Node.ELEMENT_NODE)
-        throw injected.createStacklessError('Node is not an element');
-      const element = node as unknown as Element;
-      return { value: element.innerHTML };
-    }, undefined)).value;
+  async innerHTML(metadata: CallMetadata): Promise<string> {
+    return this._frame.innerHTML(metadata, ':scope', {}, this);
   }
 
-  async dispatchEvent(type: string, eventInit: Object = {}) {
-    const main = await this._frame._mainContext();
-    await this._page._frameManager.waitForSignalsCreatedBy(null, false /* noWaitFor */, async () => {
-      return main.evaluate(([injected, node, { type, eventInit }]) => injected.dispatchEvent(node, type, eventInit), [await main.injectedScript(), this, { type, eventInit }] as const);
-    });
+  async dispatchEvent(metadata: CallMetadata, type: string, eventInit: Object = {}) {
+    return this._frame.dispatchEvent(metadata, ':scope', type, eventInit, {}, this);
   }
 
   async _scrollRectIntoViewIfNeeded(rect?: types.Rect): Promise<'error:notvisible' | 'error:notconnected' | 'done'> {
@@ -634,7 +607,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     await this._page._frameManager.waitForSignalsCreatedBy(progress, options.noWaitAfter, async () => {
       progress.throwIfAborted();  // Avoid action that has side-effects.
       if (localPaths)
-        await this._page._delegate.setInputFilePaths(retargeted, localPaths);
+        await this._page._delegate.setInputFilePaths(progress, retargeted, localPaths);
       else
         await this._page._delegate.setInputFiles(retargeted, filePayloads!);
     });
@@ -754,51 +727,35 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
   }
 
   async evalOnSelector(selector: string, strict: boolean, expression: string, isFunction: boolean | undefined, arg: any): Promise<any> {
-    const handle = await this._frame.selectors.query(selector, { strict }, this);
-    if (!handle)
-      throw new Error(`Error: failed to find element matching selector "${selector}"`);
-    const result = await handle.evaluateExpression(expression, { isFunction }, arg);
-    handle.dispose();
-    return result;
+    return this._frame.evalOnSelector(selector, strict, expression, isFunction, arg, this);
   }
 
   async evalOnSelectorAll(selector: string, expression: string, isFunction: boolean | undefined, arg: any): Promise<any> {
-    const arrayHandle = await this._frame.selectors.queryArrayInMainWorld(selector, this);
-    const result = await arrayHandle.evaluateExpression(expression, { isFunction }, arg);
-    arrayHandle.dispose();
-    return result;
+    return this._frame.evalOnSelectorAll(selector, expression, isFunction, arg, this);
   }
 
-  async isVisible(): Promise<boolean> {
-    const result = await this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'visible'), {});
-    if (result === 'error:notconnected')
-      return false;
-    return result;
+  async isVisible(metadata: CallMetadata): Promise<boolean> {
+    return this._frame.isVisible(metadata, ':scope', {}, this);
   }
 
-  async isHidden(): Promise<boolean> {
-    const result = await this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'hidden'), {});
-    return throwRetargetableDOMError(result);
+  async isHidden(metadata: CallMetadata): Promise<boolean> {
+    return this._frame.isHidden(metadata, ':scope', {}, this);
   }
 
-  async isEnabled(): Promise<boolean> {
-    const result = await this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'enabled'), {});
-    return throwRetargetableDOMError(result);
+  async isEnabled(metadata: CallMetadata): Promise<boolean> {
+    return this._frame.isEnabled(metadata, ':scope', {}, this);
   }
 
-  async isDisabled(): Promise<boolean> {
-    const result = await this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'disabled'), {});
-    return throwRetargetableDOMError(result);
+  async isDisabled(metadata: CallMetadata): Promise<boolean> {
+    return this._frame.isDisabled(metadata, ':scope', {}, this);
   }
 
-  async isEditable(): Promise<boolean> {
-    const result = await this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'editable'), {});
-    return throwRetargetableDOMError(result);
+  async isEditable(metadata: CallMetadata): Promise<boolean> {
+    return this._frame.isEditable(metadata, ':scope', {}, this);
   }
 
-  async isChecked(): Promise<boolean> {
-    const result = await this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'checked'), {});
-    return throwRetargetableDOMError(result);
+  async isChecked(metadata: CallMetadata): Promise<boolean> {
+    return this._frame.isChecked(metadata, ':scope', {}, this);
   }
 
   async waitForElementState(metadata: CallMetadata, state: 'visible' | 'hidden' | 'stable' | 'enabled' | 'disabled' | 'editable', options: types.TimeoutOptions = {}): Promise<void> {
diff --git a/packages/playwright-core/src/server/firefox/ffPage.ts b/packages/playwright-core/src/server/firefox/ffPage.ts
index 9683261d59..378d7c8683 100644
--- a/packages/playwright-core/src/server/firefox/ffPage.ts
+++ b/packages/playwright-core/src/server/firefox/ffPage.ts
@@ -545,15 +545,15 @@ export class FFPage implements PageDelegate {
       injected.setInputFiles(node, files), files);
   }
 
-  async setInputFilePaths(handle: dom.ElementHandle<HTMLInputElement>, files: string[]): Promise<void> {
+  async setInputFilePaths(progress: Progress, handle: dom.ElementHandle<HTMLInputElement>, files: string[]): Promise<void> {
     await Promise.all([
       this._session.send('Page.setFileInputFiles', {
         frameId: handle._context.frame._id,
         objectId: handle._objectId,
         files
       }),
-      handle.dispatchEvent('input'),
-      handle.dispatchEvent('change')
+      handle.dispatchEvent(progress.metadata, 'input'),
+      handle.dispatchEvent(progress.metadata, 'change')
     ]);
   }
 
diff --git a/packages/playwright-core/src/server/frames.ts b/packages/playwright-core/src/server/frames.ts
index 7b604649a2..de1a231295 100644
--- a/packages/playwright-core/src/server/frames.ts
+++ b/packages/playwright-core/src/server/frames.ts
@@ -829,14 +829,14 @@ export class Frame extends SdkObject {
     }, this._page._timeoutSettings.timeout(options));
   }
 
-  async dispatchEvent(metadata: CallMetadata, selector: string, type: string, eventInit: Object = {}, options: types.QueryOnSelectorOptions = {}): Promise<void> {
+  async dispatchEvent(metadata: CallMetadata, selector: string, type: string, eventInit: Object = {}, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<void> {
     await this._callOnElementOnceMatches(metadata, selector, (injectedScript, element, data) => {
       injectedScript.dispatchEvent(element, data.type, data.eventInit);
-    }, { type, eventInit }, { mainWorld: true, ...options });
+    }, { type, eventInit }, { mainWorld: true, ...options }, scope);
   }
 
-  async evalOnSelector(selector: string, strict: boolean, expression: string, isFunction: boolean | undefined, arg: any): Promise<any> {
-    const handle = await this.selectors.query(selector, { strict });
+  async evalOnSelector(selector: string, strict: boolean, expression: string, isFunction: boolean | undefined, arg: any, scope?: dom.ElementHandle): Promise<any> {
+    const handle = await this.selectors.query(selector, { strict }, scope);
     if (!handle)
       throw new Error(`Error: failed to find element matching selector "${selector}"`);
     const result = await handle.evaluateExpression(expression, { isFunction }, arg);
@@ -844,8 +844,8 @@ export class Frame extends SdkObject {
     return result;
   }
 
-  async evalOnSelectorAll(selector: string, expression: string, isFunction: boolean | undefined, arg: any): Promise<any> {
-    const arrayHandle = await this.selectors.queryArrayInMainWorld(selector);
+  async evalOnSelectorAll(selector: string, expression: string, isFunction: boolean | undefined, arg: any, scope?: dom.ElementHandle): Promise<any> {
+    const arrayHandle = await this.selectors.queryArrayInMainWorld(selector, scope);
     const result = await arrayHandle.evaluateExpression(expression, { isFunction }, arg);
     arrayHandle.dispose();
     return result;
@@ -1215,33 +1215,33 @@ export class Frame extends SdkObject {
     }, this._page._timeoutSettings.timeout(options));
   }
 
-  async textContent(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<string | null> {
-    return this._callOnElementOnceMatches(metadata, selector, (injected, element) => element.textContent, undefined, options);
+  async textContent(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<string | null> {
+    return this._callOnElementOnceMatches(metadata, selector, (injected, element) => element.textContent, undefined, options, scope);
   }
 
-  async innerText(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<string> {
+  async innerText(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<string> {
     return this._callOnElementOnceMatches(metadata, selector, (injectedScript, element) => {
       if (element.namespaceURI !== 'http://www.w3.org/1999/xhtml')
         throw injectedScript.createStacklessError('Node is not an HTMLElement');
       return (element as HTMLElement).innerText;
-    }, undefined, options);
+    }, undefined, options, scope);
   }
 
-  async innerHTML(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<string> {
-    return this._callOnElementOnceMatches(metadata, selector, (injected, element) => element.innerHTML, undefined, options);
+  async innerHTML(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<string> {
+    return this._callOnElementOnceMatches(metadata, selector, (injected, element) => element.innerHTML, undefined, options, scope);
   }
 
-  async getAttribute(metadata: CallMetadata, selector: string, name: string, options: types.QueryOnSelectorOptions = {}): Promise<string | null> {
-    return this._callOnElementOnceMatches(metadata, selector, (injected, element, data) => element.getAttribute(data.name), { name }, options);
+  async getAttribute(metadata: CallMetadata, selector: string, name: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<string | null> {
+    return this._callOnElementOnceMatches(metadata, selector, (injected, element, data) => element.getAttribute(data.name), { name }, options, scope);
   }
 
-  async inputValue(metadata: CallMetadata, selector: string, options: types.TimeoutOptions & types.StrictOptions = {}): Promise<string> {
+  async inputValue(metadata: CallMetadata, selector: string, options: types.TimeoutOptions & types.StrictOptions = {}, scope?: dom.ElementHandle): Promise<string> {
     return this._callOnElementOnceMatches(metadata, selector, (injectedScript, node) => {
       const element = injectedScript.retarget(node, 'follow-label');
       if (!element || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT'))
         throw injectedScript.createStacklessError('Node is not an <input>, <textarea> or <select> element');
       return (element as any).value;
-    }, undefined, options);
+    }, undefined, options, scope);
   }
 
   async highlight(selector: string) {
@@ -1263,25 +1263,25 @@ export class Frame extends SdkObject {
     });
   }
 
-  private async _elementState(metadata: CallMetadata, selector: string, state: ElementStateWithoutStable, options: types.QueryOnSelectorOptions = {}): Promise<boolean> {
+  private async _elementState(metadata: CallMetadata, selector: string, state: ElementStateWithoutStable, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
     const result = await this._callOnElementOnceMatches(metadata, selector, (injected, element, data) => {
       return injected.elementState(element, data.state);
-    }, { state }, options);
+    }, { state }, options, scope);
     return dom.throwRetargetableDOMError(result);
   }
 
-  async isVisible(metadata: CallMetadata, selector: string, options: types.StrictOptions = {}): Promise<boolean> {
+  async isVisible(metadata: CallMetadata, selector: string, options: types.StrictOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
     const controller = new ProgressController(metadata, this);
     return controller.run(async progress => {
       progress.log(`  checking visibility of ${this._asLocator(selector)}`);
-      const resolved = await this.selectors.resolveInjectedForSelector(selector, options);
+      const resolved = await this.selectors.resolveInjectedForSelector(selector, options, scope);
       if (!resolved)
         return false;
-      return await resolved.injected.evaluate((injected, { info }) => {
-        const element = injected.querySelector(info.parsed, document, info.strict);
+      return await resolved.injected.evaluate((injected, { info, root }) => {
+        const element = injected.querySelector(info.parsed, root || document, info.strict);
         const state = element ? injected.elementState(element, 'visible') : false;
         return state === 'error:notconnected' ? false : state;
-      }, { info: resolved.info });
+      }, { info: resolved.info, root: resolved.frame === this ? scope : undefined });
     }, this._page._timeoutSettings.timeout({})).catch(e => {
       if (js.isJavaScriptErrorInEvaluate(e) || isInvalidSelectorError(e) || isSessionClosedError(e))
         throw e;
@@ -1289,24 +1289,24 @@ export class Frame extends SdkObject {
     });
   }
 
-  async isHidden(metadata: CallMetadata, selector: string, options: types.StrictOptions = {}): Promise<boolean> {
-    return !(await this.isVisible(metadata, selector, options));
+  async isHidden(metadata: CallMetadata, selector: string, options: types.StrictOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
+    return !(await this.isVisible(metadata, selector, options, scope));
   }
 
-  async isDisabled(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<boolean> {
-    return this._elementState(metadata, selector, 'disabled', options);
+  async isDisabled(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
+    return this._elementState(metadata, selector, 'disabled', options, scope);
   }
 
-  async isEnabled(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<boolean> {
-    return this._elementState(metadata, selector, 'enabled', options);
+  async isEnabled(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
+    return this._elementState(metadata, selector, 'enabled', options, scope);
   }
 
-  async isEditable(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<boolean> {
-    return this._elementState(metadata, selector, 'editable', options);
+  async isEditable(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
+    return this._elementState(metadata, selector, 'editable', options, scope);
   }
 
-  async isChecked(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}): Promise<boolean> {
-    return this._elementState(metadata, selector, 'checked', options);
+  async isChecked(metadata: CallMetadata, selector: string, options: types.QueryOnSelectorOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
+    return this._elementState(metadata, selector, 'checked', options, scope);
   }
 
   async hover(metadata: CallMetadata, selector: string, options: types.PointerActionOptions & types.PointerActionWaitOptions & types.NavigatingActionWaitOptions = {}) {
@@ -1549,26 +1549,26 @@ export class Frame extends SdkObject {
     this._parentFrame = null;
   }
 
-  private async _callOnElementOnceMatches<T, R>(metadata: CallMetadata, selector: string, body: ElementCallback<T, R>, taskData: T, options: types.TimeoutOptions & types.StrictOptions & { mainWorld?: boolean } = {}): Promise<R> {
+  private async _callOnElementOnceMatches<T, R>(metadata: CallMetadata, selector: string, body: ElementCallback<T, R>, taskData: T, options: types.TimeoutOptions & types.StrictOptions & { mainWorld?: boolean } = {}, scope?: dom.ElementHandle): Promise<R> {
     const callbackText = body.toString();
     const controller = new ProgressController(metadata, this);
     return controller.run(async progress => {
       progress.log(`waiting for ${this._asLocator(selector)}`);
-      return this.retryWithProgressAndTimeouts(progress, [0, 20, 50, 100, 100, 500], async continuePolling => {
-        const resolved = await this.selectors.resolveInjectedForSelector(selector, options);
+      const promise = this.retryWithProgressAndTimeouts(progress, [0, 20, 50, 100, 100, 500], async continuePolling => {
+        const resolved = await this.selectors.resolveInjectedForSelector(selector, options, scope);
         progress.throwIfAborted();
         if (!resolved)
           return continuePolling;
-        const { log, success, value } = await resolved.injected.evaluate((injected, { info, callbackText, taskData, callId }) => {
+        const { log, success, value } = await resolved.injected.evaluate((injected, { info, callbackText, taskData, callId, root }) => {
           const callback = injected.eval(callbackText) as ElementCallback<T, R>;
-          const element = injected.querySelector(info.parsed, document, info.strict);
+          const element = injected.querySelector(info.parsed, root || document, info.strict);
           if (!element)
             return { success: false };
           const log = `  locator resolved to ${injected.previewNode(element)}`;
           if (callId)
             injected.markTargetElements(new Set([element]), callId);
           return { log, success: true, value: callback(injected, element, taskData as T) };
-        }, { info: resolved.info, callbackText, taskData, callId: progress.metadata.id });
+        }, { info: resolved.info, callbackText, taskData, callId: progress.metadata.id, root: resolved.frame === this ? scope : undefined });
 
         if (log)
           progress.log(log);
@@ -1576,6 +1576,7 @@ export class Frame extends SdkObject {
           return continuePolling;
         return value!;
       });
+      return scope ? scope._context._raceAgainstContextDestroyed(promise) : promise;
     }, this._page._timeoutSettings.timeout(options));
   }
 
diff --git a/packages/playwright-core/src/server/page.ts b/packages/playwright-core/src/server/page.ts
index e275b725bd..d5cba690f5 100644
--- a/packages/playwright-core/src/server/page.ts
+++ b/packages/playwright-core/src/server/page.ts
@@ -78,7 +78,7 @@ export interface PageDelegate {
   getOwnerFrame(handle: dom.ElementHandle): Promise<string | null>; // Returns frameId.
   getContentQuads(handle: dom.ElementHandle): Promise<types.Quad[] | null>;
   setInputFiles(handle: dom.ElementHandle<HTMLInputElement>, files: types.FilePayload[]): Promise<void>;
-  setInputFilePaths(handle: dom.ElementHandle<HTMLInputElement>, files: string[]): Promise<void>;
+  setInputFilePaths(progress: Progress, handle: dom.ElementHandle<HTMLInputElement>, files: string[]): Promise<void>;
   getBoundingBox(handle: dom.ElementHandle): Promise<types.Rect | null>;
   getFrameElement(frame: frames.Frame): Promise<dom.ElementHandle>;
   scrollRectIntoViewIfNeeded(handle: dom.ElementHandle, rect?: types.Rect): Promise<'error:notvisible' | 'error:notconnected' | 'done'>;
diff --git a/packages/playwright-core/src/server/trace/recorder/tracing.ts b/packages/playwright-core/src/server/trace/recorder/tracing.ts
index e50b8ea119..1656842016 100644
--- a/packages/playwright-core/src/server/trace/recorder/tracing.ts
+++ b/packages/playwright-core/src/server/trace/recorder/tracing.ts
@@ -28,7 +28,7 @@ import { assert, createGuid, monotonicTime } from '../../../utils';
 import { mkdirIfNeeded, removeFolders } from '../../../utils/fileUtils';
 import { Artifact } from '../../artifact';
 import { BrowserContext } from '../../browserContext';
-import { ElementHandle } from '../../dom';
+import type { ElementHandle } from '../../dom';
 import type { APIRequestContext } from '../../fetch';
 import type { CallMetadata, InstrumentationListener } from '../../instrumentation';
 import { SdkObject } from '../../instrumentation';
@@ -342,10 +342,6 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps
       return;
     if (!shouldCaptureSnapshot(metadata))
       return;
-    // We have |element| for input actions (page.click and handle.click)
-    // and |sdkObject| element for accessors like handle.textContent.
-    if (!element && sdkObject instanceof ElementHandle)
-      element = sdkObject;
     await this._snapshotter.captureSnapshot(sdkObject.attribution.page, metadata.id, snapshotName, element).catch(() => {});
   }
 
diff --git a/packages/playwright-core/src/server/webkit/wkPage.ts b/packages/playwright-core/src/server/webkit/wkPage.ts
index 1ebb724af8..5d0bb4e241 100644
--- a/packages/playwright-core/src/server/webkit/wkPage.ts
+++ b/packages/playwright-core/src/server/webkit/wkPage.ts
@@ -969,7 +969,7 @@ export class WKPage implements PageDelegate {
     await this._session.send('DOM.setInputFiles', { objectId, files: protocolFiles });
   }
 
-  async setInputFilePaths(handle: dom.ElementHandle<HTMLInputElement>, paths: string[]): Promise<void> {
+  async setInputFilePaths(progress: Progress, handle: dom.ElementHandle<HTMLInputElement>, paths: string[]): Promise<void> {
     const pageProxyId = this._pageProxySession.sessionId;
     const objectId = handle._objectId;
     await Promise.all([
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 9b183e86f8..f331314959 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -19,6 +19,7 @@ import { traceViewerFixtures } from '../config/traceViewerFixtures';
 import fs from 'fs';
 import path from 'path';
 import { expect, playwrightTest } from '../config/browserTest';
+import type { FrameLocator } from '@playwright/test';
 
 const test = playwrightTest.extend<TraceViewerFixtures>(traceViewerFixtures);
 
@@ -558,39 +559,51 @@ test('should register custom elements', async ({ page, server, runAndTrace }) =>
 test('should highlight target elements', async ({ page, runAndTrace, browserName }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.setContent(`
-      <div>hello</div>
-      <div>world</div>
+      <div>t1</div>
+      <div>t2</div>
+      <div>t3</div>
+      <div>t4</div>
+      <div>t5</div>
+      <div>t6</div>
+      <div>multi</div>
+      <div>multi</div>
     `);
-    await page.click('text=hello');
-    await page.innerText('text=hello');
-    const handle = await page.$('text=hello');
-    await handle.click();
-    await handle.innerText();
-    await page.locator('text=hello').innerText();
-    await expect(page.locator('text=hello')).toHaveText(/hello/i);
-    await expect(page.locator('div')).toHaveText(['a', 'b'], { timeout: 1000 }).catch(() => {});
+    await page.click('text=t1');
+    await page.innerText('text=t2');
+    await (await page.$('text=t3')).click();
+    await (await page.$('text=t4')).innerText();
+    await page.locator('text=t5').innerText();
+    await expect(page.locator('text=t6')).toHaveText(/t6/i);
+    await expect(page.locator('text=multi')).toHaveText(['a', 'b'], { timeout: 1000 }).catch(() => {});
   });
 
+  async function highlightedDivs(frameLocator: FrameLocator) {
+    return frameLocator.locator('div').evaluateAll(divs => {
+      // See snapshotRenderer.ts for the exact color.
+      return divs.filter(div => getComputedStyle(div).backgroundColor === 'rgba(111, 168, 220, 0.498)').map(div => div.textContent);
+    });
+  }
+
   const framePageClick = await traceViewer.snapshotFrame('page.click');
-  await expect(framePageClick.locator('[__playwright_target__]')).toHaveText(['hello']);
+  await expect.poll(() => highlightedDivs(framePageClick)).toEqual(['t1']);
 
   const framePageInnerText = await traceViewer.snapshotFrame('page.innerText');
-  await expect(framePageInnerText.locator('[__playwright_target__]')).toHaveText(['hello']);
+  await expect.poll(() => highlightedDivs(framePageInnerText)).toEqual(['t2']);
 
   const frameHandleClick = await traceViewer.snapshotFrame('elementHandle.click');
-  await expect(frameHandleClick.locator('[__playwright_target__]')).toHaveText(['hello']);
+  await expect.poll(() => highlightedDivs(frameHandleClick)).toEqual(['t3']);
 
   const frameHandleInnerText = await traceViewer.snapshotFrame('elementHandle.innerText');
-  await expect(frameHandleInnerText.locator('[__playwright_target__]')).toHaveText(['hello']);
+  await expect.poll(() => highlightedDivs(frameHandleInnerText)).toEqual(['t4']);
 
   const frameLocatorInnerText = await traceViewer.snapshotFrame('locator.innerText');
-  await expect(frameLocatorInnerText.locator('[__playwright_target__]')).toHaveText(['hello']);
+  await expect.poll(() => highlightedDivs(frameLocatorInnerText)).toEqual(['t5']);
 
   const frameExpect1 = await traceViewer.snapshotFrame('expect.toHaveText', 0);
-  await expect(frameExpect1.locator('[__playwright_target__]')).toHaveText(['hello']);
+  await expect.poll(() => highlightedDivs(frameExpect1)).toEqual(['t6']);
 
   const frameExpect2 = await traceViewer.snapshotFrame('expect.toHaveText', 1);
-  await expect(frameExpect2.locator('[__playwright_target__]')).toHaveText(['hello', 'world']);
+  await expect.poll(() => highlightedDivs(frameExpect2)).toEqual(['multi', 'multi']);
 });
 
 test('should show action source', async ({ showTraceViewer }) => {