feat(cli): add pick and highlight commands#40213
Conversation
Adds two new CLI/MCP commands backed by the devtools capability: - `pick` / `browser_pick_locator` — waits for the user to click an element in the browser, prints its `ref` and generated locator. - `highlight <el>` / `browser_highlight` + `--hide` / `browser_hide_highlight` — adds a persistent highlight overlay for an element and removes it on demand. Supporting changes: - New `Locator.ariaRef()` API (JS-only, internal protocol method) returning the aria ref assigned by the most recent aria snapshot. - `Highlight.addElementHighlight`/`removeElementHighlight` replace the single-selector `runHighlightOnRaf`, tracking multiple selectors so several highlights can coexist until individually removed. - `InjectedScript.addHighlight`/`removeHighlight` wired to the new methods.
| if no ref has been assigned yet. Call [`method: Locator.ariaSnapshot`] or [`method: Page.ariaSnapshot`] before this | ||
| method to ensure a ref is available. | ||
|
|
||
| ### option: Locator.ariaRef.timeout = %%-input-timeout-%% |
There was a problem hiding this comment.
We don't, but since locator is getting resolved it is there, it needs to be guarded.
|
|
||
| const highlight = declareCommand({ | ||
| name: 'highlight', | ||
| description: 'Show (or with --hide, remove) a highlight overlay for an element', |
There was a problem hiding this comment.
I'd also add hide all in some form.
Test results for "MCP"6 failed 6010 passed, 952 skipped Merge workflow run. |
Test results for "tests 1"2 flaky39148 passed, 847 skipped Merge workflow run. |
2 participants
Summary
playwright-cli pick/browser_pick_locator— prompts the user to click an element in the browser and prints itsrefand generated locatorplaywright-cli highlight <el>(and--hide) /browser_highlight+browser_hide_highlight— persistent, stackable element highlight overlaysLocator.ariaRef()(JS-only) returning the aria ref of the matched elementHighlightnow tracks multiple selectors viaaddElementHighlight/removeElementHighlight, replacing single-selectorrunHighlightOnRafBoth commands live under the
devtoolscapability.