chore: make sure _generateLocatorString does not timeout (#36381)

packages/playwright-core/src/client/elementHandle.ts

@@ -61,11 +61,6 @@ export class ElementHandle<T extends Node = Node> extends JSHandle<T> implements
     return Frame.fromNullable((await this._elementChannel.contentFrame()).frame);
   }
 
-  async _generateLocatorString(): Promise<string | null> {
-    const value = (await this._elementChannel.generateLocatorString()).value;
-    return value === undefined ? null : value;
-  }
-
   async getAttribute(name: string): Promise<string | null> {
     const value = (await this._elementChannel.getAttribute({ name })).value;
     return value === undefined ? null : value;

packages/playwright-core/src/client/locator.ts

@@ -250,7 +250,8 @@ export class Locator implements api.Locator {
   }
 
   async _generateLocatorString(): Promise<string | null> {
-    return await this._withElement(h => h._generateLocatorString(), { title: 'Generate locator string', internal: true });
+    const { value } = await this._frame._channel.generateLocatorString({ selector: this._selector });
+    return value === undefined ? null : value;
   }
 
   async getAttribute(name: string, options?: TimeoutOptions): Promise<string | null> {

packages/playwright-core/src/protocol/validator.ts

@@ -1651,6 +1651,12 @@ scheme.FrameFrameElementParams = tOptional(tObject({}));
 scheme.FrameFrameElementResult = tObject({
   element: tChannel(['ElementHandle']),
 });
+scheme.FrameGenerateLocatorStringParams = tObject({
+  selector: tString,
+});
+scheme.FrameGenerateLocatorStringResult = tObject({
+  value: tOptional(tString),
+});
 scheme.FrameHighlightParams = tObject({
   selector: tString,
 });
@@ -2044,10 +2050,6 @@ scheme.ElementHandleFillParams = tObject({
 scheme.ElementHandleFillResult = tOptional(tObject({}));
 scheme.ElementHandleFocusParams = tOptional(tObject({}));
 scheme.ElementHandleFocusResult = tOptional(tObject({}));
-scheme.ElementHandleGenerateLocatorStringParams = tOptional(tObject({}));
-scheme.ElementHandleGenerateLocatorStringResult = tObject({
-  value: tOptional(tString),
-});
 scheme.ElementHandleGetAttributeParams = tObject({
   name: tString,
 });

packages/playwright-core/src/server/dispatchers/elementHandlerDispatcher.ts

@@ -65,10 +65,6 @@ export class ElementHandleDispatcher extends JSHandleDispatcher<FrameDispatcher>
     return { frame: frame ? FrameDispatcher.from(this._browserContextDispatcher(), frame) : undefined };
   }
 
-  async generateLocatorString(params: channels.ElementHandleGenerateLocatorStringParams, metadata: CallMetadata): Promise<channels.ElementHandleGenerateLocatorStringResult> {
-    return { value: await this._elementHandle.generateLocatorString() };
-  }
-
   async getAttribute(params: channels.ElementHandleGetAttributeParams, metadata: CallMetadata): Promise<channels.ElementHandleGetAttributeResult> {
     const value = await this._elementHandle.getAttribute(metadata, params.name);
     return { value: value === null ? undefined : value };

packages/playwright-core/src/server/dispatchers/frameDispatcher.ts

@@ -178,6 +178,10 @@ export class FrameDispatcher extends Dispatcher<Frame, channels.FrameChannel, Br
     return { value: await this._frame.innerHTML(metadata, params.selector, params) };
   }
 
+  async generateLocatorString(params: channels.FrameGenerateLocatorStringParams, metadata: CallMetadata): Promise<channels.FrameGenerateLocatorStringResult> {
+    return { value: await this._frame.generateLocatorString(metadata, params.selector) };
+  }
+
   async getAttribute(params: channels.FrameGetAttributeParams, metadata: CallMetadata): Promise<channels.FrameGetAttributeResult> {
     const value = await this._frame.getAttribute(metadata, params.selector, params.name, params);
     return { value: value === null ? undefined : value };

packages/playwright-core/src/server/dom.ts

@@ -18,7 +18,7 @@ import fs from 'fs';
 
 import * as js from './javascript';
 import { ProgressController } from './progress';
-import { asLocator, isUnderTest } from '../utils';
+import { isUnderTest } from '../utils';
 import { prepareFilesForUpload } from './fileUploadUtils';
 import * as rawInjectedScriptSource from '../generated/injectedScriptSource';
 
@@ -183,38 +183,6 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return this._page.delegate.getContentFrame(this);
   }
 
-  async generateLocatorString(): Promise<string | undefined> {
-    const selectors = await this._generateSelectorString();
-    if (!selectors.length)
-      return;
-    return asLocator('javascript', selectors.reverse().join(' >> internal:control=enter-frame >> '));
-  }
-
-  private async _generateSelectorString(): Promise<string[]> {
-    const selector = await this.evaluateInUtility(async ([injected, node]) => {
-      return injected.generateSelectorSimple(node as unknown as Element);
-    }, {});
-    if (selector === 'error:notconnected')
-      return [];
-
-    let frame: frames.Frame | null = this._frame;
-    const result: string[] = [selector];
-    while (frame?.parentFrame()) {
-      const frameElement = await frame.frameElement();
-      if (frameElement) {
-        const selector = await frameElement.evaluateInUtility(async ([injected, node]) => {
-          return injected.generateSelectorSimple(node as unknown as Element);
-        }, {});
-        frameElement.dispose();
-        if (selector === 'error:notconnected')
-          return [];
-        result.push(selector);
-      }
-      frame = frame.parentFrame();
-    }
-    return result;
-  }
-
   async getAttribute(metadata: CallMetadata, name: string): Promise<string | null> {
     return this._frame.getAttribute(metadata, ':scope', name, { timeout: 0 }, this);
   }

packages/playwright-core/src/server/frames.ts

@@ -1212,6 +1212,38 @@ export class Frame extends SdkObject {
     }, options.timeout);
   }
 
+  async generateLocatorString(metadata: CallMetadata, selector: string): Promise<string | undefined> {
+    const controller = new ProgressController(metadata, this);
+    return controller.run(async progress => {
+      const element = await progress.race(this.selectors.query(selector));
+      if (!element)
+        throw new Error(`No element matching ${this._asLocator(selector)}`);
+
+      const generated = await progress.race(element.evaluateInUtility(async ([injected, node]) => {
+        return injected.generateSelectorSimple(node as unknown as Element);
+      }, {}));
+      if (!generated)
+        throw new Error(`Unable to generate locator for ${this._asLocator(selector)}`);
+
+      let frame: Frame | null = element._frame;
+      const result = [generated];
+      while (frame?.parentFrame()) {
+        const frameElement = await progress.race(frame.frameElement());
+        if (frameElement) {
+          const generated = await progress.race(frameElement.evaluateInUtility(async ([injected, node]) => {
+            return injected.generateSelectorSimple(node as unknown as Element);
+          }, {}));
+          frameElement.dispose();
+          if (generated === 'error:notconnected' || !generated)
+            throw new Error(`Unable to generate locator for ${this._asLocator(selector)}`);
+          result.push(generated);
+        }
+        frame = frame.parentFrame();
+      }
+      return asLocator(this._page.browserContext._browser.sdkLanguage(), result.reverse().join(' >> internal:control=enter-frame >> '));
+    });
+  }
+
   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);
   }

packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts

@@ -154,6 +154,7 @@ export const methodMetainfo = new Map<string, { internal?: boolean, title?: stri
   ['Frame.fill', { title: 'Fill "{value}"', slowMo: true, snapshot: true, pausesBeforeInput: true, }],
   ['Frame.focus', { title: 'Focus', slowMo: true, snapshot: true, }],
   ['Frame.frameElement', { internal: true, }],
+  ['Frame.generateLocatorString', { internal: true, }],
   ['Frame.highlight', { internal: true, }],
   ['Frame.getAttribute', { internal: true, snapshot: true, }],
   ['Frame.goto', { title: 'Navigate to "{url}"', slowMo: true, snapshot: true, }],
@@ -207,7 +208,6 @@ export const methodMetainfo = new Map<string, { internal?: boolean, title?: stri
   ['ElementHandle.dispatchEvent', { title: 'Dispatch event', slowMo: true, snapshot: true, }],
   ['ElementHandle.fill', { title: 'Fill "{value}"', slowMo: true, snapshot: true, pausesBeforeInput: true, }],
   ['ElementHandle.focus', { title: 'Focus', slowMo: true, snapshot: true, }],
-  ['ElementHandle.generateLocatorString', { internal: true, }],
   ['ElementHandle.getAttribute', { internal: true, }],
   ['ElementHandle.hover', { title: 'Hover', slowMo: true, snapshot: true, pausesBeforeInput: true, }],
   ['ElementHandle.innerHTML', { title: 'Get HTML', snapshot: true, }],

packages/protocol/src/channels.d.ts

@@ -2635,6 +2635,7 @@ export interface FrameChannel extends FrameEventTarget, Channel {
   fill(params: FrameFillParams, metadata?: CallMetadata): Promise<FrameFillResult>;
   focus(params: FrameFocusParams, metadata?: CallMetadata): Promise<FrameFocusResult>;
   frameElement(params?: FrameFrameElementParams, metadata?: CallMetadata): Promise<FrameFrameElementResult>;
+  generateLocatorString(params: FrameGenerateLocatorStringParams, metadata?: CallMetadata): Promise<FrameGenerateLocatorStringResult>;
   highlight(params: FrameHighlightParams, metadata?: CallMetadata): Promise<FrameHighlightResult>;
   getAttribute(params: FrameGetAttributeParams, metadata?: CallMetadata): Promise<FrameGetAttributeResult>;
   goto(params: FrameGotoParams, metadata?: CallMetadata): Promise<FrameGotoResult>;
@@ -2890,6 +2891,15 @@ export type FrameFrameElementOptions = {};
 export type FrameFrameElementResult = {
   element: ElementHandleChannel,
 };
+export type FrameGenerateLocatorStringParams = {
+  selector: string,
+};
+export type FrameGenerateLocatorStringOptions = {
+
+};
+export type FrameGenerateLocatorStringResult = {
+  value?: string,
+};
 export type FrameHighlightParams = {
   selector: string,
 };
@@ -3395,7 +3405,6 @@ export interface ElementHandleChannel extends ElementHandleEventTarget, JSHandle
   dispatchEvent(params: ElementHandleDispatchEventParams, metadata?: CallMetadata): Promise<ElementHandleDispatchEventResult>;
   fill(params: ElementHandleFillParams, metadata?: CallMetadata): Promise<ElementHandleFillResult>;
   focus(params?: ElementHandleFocusParams, metadata?: CallMetadata): Promise<ElementHandleFocusResult>;
-  generateLocatorString(params?: ElementHandleGenerateLocatorStringParams, metadata?: CallMetadata): Promise<ElementHandleGenerateLocatorStringResult>;
   getAttribute(params: ElementHandleGetAttributeParams, metadata?: CallMetadata): Promise<ElementHandleGetAttributeResult>;
   hover(params: ElementHandleHoverParams, metadata?: CallMetadata): Promise<ElementHandleHoverResult>;
   innerHTML(params?: ElementHandleInnerHTMLParams, metadata?: CallMetadata): Promise<ElementHandleInnerHTMLResult>;
@@ -3531,11 +3540,6 @@ export type ElementHandleFillResult = void;
 export type ElementHandleFocusParams = {};
 export type ElementHandleFocusOptions = {};
 export type ElementHandleFocusResult = void;
-export type ElementHandleGenerateLocatorStringParams = {};
-export type ElementHandleGenerateLocatorStringOptions = {};
-export type ElementHandleGenerateLocatorStringResult = {
-  value?: string,
-};
 export type ElementHandleGetAttributeParams = {
   name: string,
 };

packages/protocol/src/protocol.yml

@@ -2289,6 +2289,13 @@ Frame:
       returns:
         element: ElementHandle
 
+    generateLocatorString:
+      internal: true
+      parameters:
+        selector: string
+      returns:
+        value: string?
+
     highlight:
       internal: true
       parameters:
@@ -2937,11 +2944,6 @@ ElementHandle:
         slowMo: true
         snapshot: true
 
-    generateLocatorString:
-      internal: true
-      returns:
-        value: string?
-
     getAttribute:
       internal: true
       parameters:

tests/page/page-aria-snapshot-ai.spec.ts

@@ -101,6 +101,10 @@ it('should stitch all frame snapshots', async ({ page, server }) => {
     const locator = await (page.locator('aria-ref=f2e2').describe('foo bar') as any)._generateLocatorString();
     expect(locator).toBe(`locator('iframe[name=\"2frames\"]').contentFrame().locator('iframe[name=\"uno\"]').contentFrame().getByText('Hi, I\\'m frame')`);
   }
+  {
+    const error = await (page.locator('aria-ref=e1000') as any)._generateLocatorString().catch(e => e);
+    expect(error.message).toContain(`No element matching locator('aria-ref=e1000')`);
+  }
 });
 
 it('should not generate refs for elements with pointer-events:none', async ({ page }) => {