feat(inspector): move pickLocator and cancelPickLocator to Page

docs/src/api/class-inspector.md

@@ -4,26 +4,6 @@
 
 Interface to the Playwright inspector.
 
-## async method: Inspector.cancelPickLocator
-* since: v1.59
-
-Cancels an ongoing [`method: Inspector.pickLocator`] call by deactivating pick locator mode.
-If no pick locator mode is active, this method is a no-op.
-
-## async method: Inspector.pickLocator
-* since: v1.59
-- returns: <[Locator]>
-
-Enters pick locator mode where hovering over page elements highlights them and shows the corresponding locator.
-Once the user clicks an element, the mode is deactivated and the [Locator] for the picked element is returned.
-
-**Usage**
-
-```js
-const locator = await page.inspector().pickLocator();
-console.log(locator);
-```
-
 ## event: Inspector.screencastFrame
 * since: v1.59
 - argument: <[Object]>

docs/src/api/class-page.md

@@ -763,6 +763,13 @@ System prompt for the agent's loop.
 
 Brings page to front (activates tab).
 
+## async method: Page.cancelPickLocator
+* since: v1.59
+* langs: js
+
+Cancels an ongoing [`method: Page.pickLocator`] call by deactivating pick locator mode.
+If no pick locator mode is active, this method is a no-op.
+
 ## async method: Page.check
 * since: v1.8
 * discouraged: Use locator-based [`method: Locator.check`] instead. Read more about [locators](../locators.md).
@@ -3077,6 +3084,20 @@ Whether or not to generate tagged (accessible) PDF. Defaults to `false`.
 
 Whether or not to embed the document outline into the PDF. Defaults to `false`.
 
+## async method: Page.pickLocator
+* since: v1.59
+* langs: js
+- returns: <[Locator]>
+
+Enters pick locator mode where hovering over page elements highlights them and shows the corresponding locator.
+Once the user clicks an element, the mode is deactivated and the [Locator] for the picked element is returned.
+
+**Usage**
+
+```js
+const locator = await page.pickLocator();
+console.log(locator);
+```
 
 ## async method: Page.press
 * since: v1.8

packages/playwright-client/types/types.d.ts

@@ -2187,6 +2187,12 @@ export interface Page {
    */
   bringToFront(): Promise<void>;
 
+  /**
+   * Cancels an ongoing [page.pickLocator()](https://playwright.dev/docs/api/class-page#page-pick-locator) call by
+   * deactivating pick locator mode. If no pick locator mode is active, this method is a no-op.
+   */
+  cancelPickLocator(): Promise<void>;
+
   /**
    * **NOTE** Use locator-based [locator.check([options])](https://playwright.dev/docs/api/class-locator#locator-check) instead.
    * Read more about [locators](https://playwright.dev/docs/locators).
@@ -3922,6 +3928,21 @@ export interface Page {
     width?: string|number;
   }): Promise<Buffer>;
 
+  /**
+   * Enters pick locator mode where hovering over page elements highlights them and shows the corresponding locator.
+   * Once the user clicks an element, the mode is deactivated and the
+   * [Locator](https://playwright.dev/docs/api/class-locator) for the picked element is returned.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const locator = await page.pickLocator();
+   * console.log(locator);
+   * ```
+   *
+   */
+  pickLocator(): Promise<Locator>;
+
   /**
    * **NOTE** Use locator-based [locator.press(key[, options])](https://playwright.dev/docs/api/class-locator#locator-press)
    * instead. Read more about [locators](https://playwright.dev/docs/locators).
@@ -20686,28 +20707,6 @@ export interface Inspector {
     data: Buffer;
   }) => any): this;
 
-  /**
-   * Cancels an ongoing
-   * [inspector.pickLocator()](https://playwright.dev/docs/api/class-inspector#inspector-pick-locator) call by
-   * deactivating pick locator mode. If no pick locator mode is active, this method is a no-op.
-   */
-  cancelPickLocator(): Promise<void>;
-
-  /**
-   * Enters pick locator mode where hovering over page elements highlights them and shows the corresponding locator.
-   * Once the user clicks an element, the mode is deactivated and the
-   * [Locator](https://playwright.dev/docs/api/class-locator) for the picked element is returned.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const locator = await page.inspector().pickLocator();
-   * console.log(locator);
-   * ```
-   *
-   */
-  pickLocator(): Promise<Locator>;
-
   /**
    * Starts capturing screencast frames. Frames are emitted as
    * [inspector.on('screencastframe')](https://playwright.dev/docs/api/class-inspector#inspector-event-screencast-frame)

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

@@ -17,7 +17,6 @@
 import { EventEmitter } from './eventEmitter';
 
 import type * as api from '../../types/types';
-import type { Locator } from './locator';
 import type { Page } from './page';
 
 export class Inspector extends EventEmitter implements api.Inspector {
@@ -29,15 +28,6 @@ export class Inspector extends EventEmitter implements api.Inspector {
     this._page._channel.on('screencastFrame', ({ data }) => this.emit('screencastframe', { data }));
   }
 
-  async pickLocator(): Promise<Locator> {
-    const { selector } = await this._page._channel.pickLocator({});
-    return this._page.locator(selector);
-  }
-
-  async cancelPickLocator(): Promise<void> {
-    await this._page._channel.cancelPickLocator({});
-  }
-
   async startScreencast(options: { maxSize?: { width: number, height: number } } = {}): Promise<void> {
     await this._page._channel.startScreencast(options);
   }

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

@@ -291,6 +291,15 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
     return this._inspector;
   }
 
+  async pickLocator(): Promise<Locator> {
+    const { selector } = await this._channel.pickLocator({});
+    return this.locator(selector);
+  }
+
+  async cancelPickLocator(): Promise<void> {
+    await this._channel.cancelPickLocator({});
+  }
+
   async $(selector: string, options?: { strict?: boolean }): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
     return await this._mainFrame.$(selector, options);
   }

packages/playwright-core/src/devtools/devtoolsController.ts

@@ -218,12 +218,12 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   async pickLocator() {
     if (!this.selectedPage)
       return;
-    const locator = await this.selectedPage.inspector().pickLocator();
+    const locator = await this.selectedPage.pickLocator();
     this._emit('elementPicked', { selector: locator.toString() });
   }
 
   async cancelPickLocator() {
-    await this.selectedPage?.inspector().cancelPickLocator();
+    await this.selectedPage?.cancelPickLocator();
   }
 
   private _sendCachedState() {

packages/playwright-core/types/types.d.ts

@@ -2187,6 +2187,12 @@ export interface Page {
    */
   bringToFront(): Promise<void>;
 
+  /**
+   * Cancels an ongoing [page.pickLocator()](https://playwright.dev/docs/api/class-page#page-pick-locator) call by
+   * deactivating pick locator mode. If no pick locator mode is active, this method is a no-op.
+   */
+  cancelPickLocator(): Promise<void>;
+
   /**
    * **NOTE** Use locator-based [locator.check([options])](https://playwright.dev/docs/api/class-locator#locator-check) instead.
    * Read more about [locators](https://playwright.dev/docs/locators).
@@ -3922,6 +3928,21 @@ export interface Page {
     width?: string|number;
   }): Promise<Buffer>;
 
+  /**
+   * Enters pick locator mode where hovering over page elements highlights them and shows the corresponding locator.
+   * Once the user clicks an element, the mode is deactivated and the
+   * [Locator](https://playwright.dev/docs/api/class-locator) for the picked element is returned.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const locator = await page.pickLocator();
+   * console.log(locator);
+   * ```
+   *
+   */
+  pickLocator(): Promise<Locator>;
+
   /**
    * **NOTE** Use locator-based [locator.press(key[, options])](https://playwright.dev/docs/api/class-locator#locator-press)
    * instead. Read more about [locators](https://playwright.dev/docs/locators).
@@ -20686,28 +20707,6 @@ export interface Inspector {
     data: Buffer;
   }) => any): this;
 
-  /**
-   * Cancels an ongoing
-   * [inspector.pickLocator()](https://playwright.dev/docs/api/class-inspector#inspector-pick-locator) call by
-   * deactivating pick locator mode. If no pick locator mode is active, this method is a no-op.
-   */
-  cancelPickLocator(): Promise<void>;
-
-  /**
-   * Enters pick locator mode where hovering over page elements highlights them and shows the corresponding locator.
-   * Once the user clicks an element, the mode is deactivated and the
-   * [Locator](https://playwright.dev/docs/api/class-locator) for the picked element is returned.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const locator = await page.inspector().pickLocator();
-   * console.log(locator);
-   * ```
-   *
-   */
-  pickLocator(): Promise<Locator>;
-
   /**
    * Starts capturing screencast frames. Frames are emitted as
    * [inspector.on('screencastframe')](https://playwright.dev/docs/api/class-inspector#inspector-event-screencast-frame)

tests/library/inspector/recorder-api.spec.ts

@@ -152,11 +152,11 @@ test('should disable recorder', async ({ context }) => {
   expect(log.action('click')).toHaveLength(2);
 });
 
-test('inspector.pickLocator should return locator for picked element', async ({ page }) => {
+test('page.pickLocator should return locator for picked element', async ({ page }) => {
   await page.setContent(`<button>Submit</button>`);
 
   const scriptReady = page.waitForEvent('console', msg => msg.text() === 'Recorder script ready for test');
-  const pickPromise = page.inspector().pickLocator();
+  const pickPromise = page.pickLocator();
   await scriptReady;
 
   const box = await page.getByRole('button', { name: 'Submit' }).boundingBox();
@@ -166,15 +166,15 @@ test('inspector.pickLocator should return locator for picked element', async ({
   await expect(locator).toHaveText('Submit');
 });
 
-test('inspector.cancelPickLocator should cancel ongoing pickLocator', async ({ page }) => {
+test('page.cancelPickLocator should cancel ongoing pickLocator', async ({ page }) => {
   await page.setContent(`<button>Submit</button>`);
 
   const scriptReady = page.waitForEvent('console', msg => msg.text() === 'Recorder script ready for test');
-  const pickPromise = page.inspector().pickLocator();
+  const pickPromise = page.pickLocator();
   await scriptReady;
 
   await Promise.all([
-    page.inspector().cancelPickLocator(),
+    page.cancelPickLocator(),
     expect(pickPromise).rejects.toThrow('Locator picking was cancelled'),
   ]);
 });