From 1bb88853ad455ba7295e1f81c0adf9caa67fb0ee Mon Sep 17 00:00:00 2001 From: "Tommy D. Rossi" Date: Sat, 3 Jan 2026 15:57:12 +0100 Subject: [PATCH] document showAriaRefLabels/hideAriaRefLabels in prompt.md --- playwriter/src/prompt.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/playwriter/src/prompt.md b/playwriter/src/prompt.md index 2bbdbe3..109d676 100644 --- a/playwriter/src/prompt.md +++ b/playwriter/src/prompt.md @@ -206,6 +206,24 @@ const matches = await editor.grep({ regex: /console\.log/ }); await editor.edit({ url: matches[0].url, oldString: 'DEBUG = false', newString: 'DEBUG = true' }); ``` +**showAriaRefLabels** - overlay Vimium-style visual labels on interactive elements. Useful for taking screenshots where you can see element references. Labels auto-hide after 5 seconds. Call again if page HTML changes to get fresh labels. + +```js +const { snapshot, labelCount } = await showAriaRefLabels({ page }); +console.log(`Showing ${labelCount} labels`); +await page.screenshot({ path: '/tmp/labeled-page.png' }); +// Use aria-ref from snapshot to interact +await page.locator('aria-ref=e5').click(); +``` + +Labels are color-coded: yellow=links, orange=buttons, coral=inputs, pink=checkboxes, peach=sliders, salmon=menus, amber=tabs. + +**hideAriaRefLabels** - manually remove labels before the 5-second auto-hide: + +```js +await hideAriaRefLabels({ page }); +``` + ## pinned elements Users can right-click → "Copy Playwriter Element Reference" to store elements in `globalThis.playwriterPinnedElem1` (increments for each pin). The reference is copied to clipboard: