diff --git a/docs/src/api/class-inspector.md b/docs/src/api/class-inspector.md index 67789d029bd33..14d719134d739 100644 --- a/docs/src/api/class-inspector.md +++ b/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]> diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md index 1b3093a52ebc8..10544cb6ca2a5 100644 --- a/docs/src/api/class-page.md +++ b/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 diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts index c7b0375a83056..8af199cbed8e8 100644 --- a/packages/playwright-client/types/types.d.ts +++ b/packages/playwright-client/types/types.d.ts @@ -2187,6 +2187,12 @@ export interface Page { */ bringToFront(): Promise; + /** + * 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; + /** * **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; + /** + * 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; + /** * **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; - - /** - * 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; - /** * Starts capturing screencast frames. Frames are emitted as * [inspector.on('screencastframe')](https://playwright.dev/docs/api/class-inspector#inspector-event-screencast-frame) diff --git a/packages/playwright-core/src/client/inspector.ts b/packages/playwright-core/src/client/inspector.ts index 6c42f1e3363c3..81abf45bb5bd5 100644 --- a/packages/playwright-core/src/client/inspector.ts +++ b/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 { - const { selector } = await this._page._channel.pickLocator({}); - return this._page.locator(selector); - } - - async cancelPickLocator(): Promise { - await this._page._channel.cancelPickLocator({}); - } - async startScreencast(options: { maxSize?: { width: number, height: number } } = {}): Promise { await this._page._channel.startScreencast(options); } diff --git a/packages/playwright-core/src/client/page.ts b/packages/playwright-core/src/client/page.ts index ffc58e30b74d2..996b6e303b047 100644 --- a/packages/playwright-core/src/client/page.ts +++ b/packages/playwright-core/src/client/page.ts @@ -291,6 +291,15 @@ export class Page extends ChannelOwner implements api.Page return this._inspector; } + async pickLocator(): Promise { + const { selector } = await this._channel.pickLocator({}); + return this.locator(selector); + } + + async cancelPickLocator(): Promise { + await this._channel.cancelPickLocator({}); + } + async $(selector: string, options?: { strict?: boolean }): Promise | null> { return await this._mainFrame.$(selector, options); } diff --git a/packages/playwright-core/src/devtools/devtoolsController.ts b/packages/playwright-core/src/devtools/devtoolsController.ts index a1c5a45dc94d7..0c6ac42aece1e 100644 --- a/packages/playwright-core/src/devtools/devtoolsController.ts +++ b/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() { diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index c7b0375a83056..8af199cbed8e8 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -2187,6 +2187,12 @@ export interface Page { */ bringToFront(): Promise; + /** + * 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; + /** * **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; + /** + * 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; + /** * **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; - - /** - * 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; - /** * Starts capturing screencast frames. Frames are emitted as * [inspector.on('screencastframe')](https://playwright.dev/docs/api/class-inspector#inspector-event-screencast-frame) diff --git a/tests/library/inspector/recorder-api.spec.ts b/tests/library/inspector/recorder-api.spec.ts index c0874ff83884f..75fd778003d96 100644 --- a/tests/library/inspector/recorder-api.spec.ts +++ b/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(``); 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(``); 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'), ]); });