feat(cli): bring selector generator into playwright

docs-src/api-body.md

@@ -4639,12 +4639,6 @@ const { selectors, firefox } = require('playwright');  // Or 'chromium' or 'webk
 (async () => {
   // Must be a function that evaluates to a selector engine instance.
   const createTagNameEngine = () => ({
-    // Creates a selector that matches given target when queried at the root.
-    // Can return undefined if unable to create one.
-    create(root, target) {
-      return root.querySelector(target.tagName) === target ? target.tagName : undefined;
-    },
-
     // Returns the first element matching given selector in the root's subtree.
     query(root, selector) {
       return root.querySelector(selector);

docs/api.md

@@ -4224,12 +4224,6 @@ const { selectors, firefox } = require('playwright');  // Or 'chromium' or 'webk
 (async () => {
   // Must be a function that evaluates to a selector engine instance.
   const createTagNameEngine = () => ({
-    // Creates a selector that matches given target when queried at the root.
-    // Can return undefined if unable to create one.
-    create(root, target) {
-      return root.querySelector(target.tagName) === target ? target.tagName : undefined;
-    },
-
     // Returns the first element matching given selector in the root's subtree.
     query(root, selector) {
       return root.querySelector(selector);

docs/extensibility.md

@@ -20,12 +20,6 @@ An example of registering selector engine that queries elements based on a tag n
 ```js
 // Must be a function that evaluates to a selector engine instance.
 const createTagNameEngine = () => ({
-  // Creates a selector that matches given target when queried at the root.
-  // Can return undefined if unable to create one.
-  create(root, target) {
-    return root.querySelector(target.tagName) === target ? target.tagName : undefined;
-  },
-
   // Returns the first element matching given selector in the root's subtree.
   query(root, selector) {
     return root.querySelector(selector);

src/client/types.ts

@@ -100,11 +100,6 @@ export type LaunchServerOptions = {
 } & FirefoxUserPrefs;
 
 export type SelectorEngine = {
-  /**
-   * Creates a selector that matches given target when queried at the root.
-   * Can return undefined if unable to create one.
-   */
-  create(root: HTMLElement, target: HTMLElement): string | undefined;
   /**
    * Returns the first element matching given selector in the root's subtree.
    */

src/debug/debugController.ts

@@ -25,23 +25,27 @@ export function installDebugController() {
 }
 
 class DebugController implements ContextListener {
-  private async ensureInstalledInFrame(frame: frames.Frame) {
-    try {
-      await frame.extendInjectedScript(debugScriptSource.source);
-    } catch (e) {
-    }
-  }
-
   async onContextCreated(context: BrowserContext): Promise<void> {
-    if (!isDebugMode())
-      return;
-    context.on(BrowserContext.Events.Page, (page: Page) => {
-      for (const frame of page.frames())
-        this.ensureInstalledInFrame(frame);
-      page.on(Page.Events.FrameNavigated, frame => this.ensureInstalledInFrame(frame));
-    });
+    if (isDebugMode())
+      installDebugControllerInContext(context);
   }
-
   async onContextWillDestroy(context: BrowserContext): Promise<void> {}
   async onContextDidDestroy(context: BrowserContext): Promise<void> {}
 }
+
+async function ensureInstalledInFrame(frame: frames.Frame) {
+  try {
+    await frame.extendInjectedScript(debugScriptSource.source);
+  } catch (e) {
+  }
+}
+
+async function installInPage(page: Page) {
+  page.on(Page.Events.FrameNavigated, ensureInstalledInFrame);
+  await Promise.all(page.frames().map(ensureInstalledInFrame));
+}
+
+export async function installDebugControllerInContext(context: BrowserContext) {
+  context.on(BrowserContext.Events.Page, installInPage);
+  await Promise.all(context.pages().map(installInPage));
+}

src/debug/injected/consoleApi.ts

@@ -15,6 +15,7 @@
  */
 
 import type InjectedScript from '../../server/injected/injectedScript';
+import { generateSelector } from './selectorGenerator';
 
 export class ConsoleAPI {
   private _injectedScript: InjectedScript;
@@ -25,28 +26,35 @@ export class ConsoleAPI {
       $: (selector: string) => this._querySelector(selector),
       $$: (selector: string) => this._querySelectorAll(selector),
       inspect: (selector: string) => this._inspect(selector),
+      selector: (element: Element) => this._selector(element),
     };
   }
 
-  _querySelector(selector: string): (Element | undefined) {
+  private _querySelector(selector: string): (Element | undefined) {
     if (typeof selector !== 'string')
       throw new Error(`Usage: playwright.query('Playwright >> selector').`);
     const parsed = this._injectedScript.parseSelector(selector);
     return this._injectedScript.querySelector(parsed, document);
   }
 
-  _querySelectorAll(selector: string): Element[] {
+  private _querySelectorAll(selector: string): Element[] {
     if (typeof selector !== 'string')
       throw new Error(`Usage: playwright.$$('Playwright >> selector').`);
     const parsed = this._injectedScript.parseSelector(selector);
     return this._injectedScript.querySelectorAll(parsed, document);
   }
 
-  _inspect(selector: string) {
+  private _inspect(selector: string) {
     if (typeof (window as any).inspect !== 'function')
       return;
     if (typeof selector !== 'string')
       throw new Error(`Usage: playwright.inspect('Playwright >> selector').`);
     (window as any).inspect(this._querySelector(selector));
   }
+
+  private _selector(element: Element) {
+    if (!(element instanceof Element))
+      throw new Error(`Usage: playwright.selector(element).`);
+    return generateSelector(this._injectedScript, element).selector;
+  }
 }