Playwright locator highlights accept custom styles
Introduced 2026-05-11 · score 0.95
HOW TO USE IT
When visually inspecting a locator, call `locator.highlight({ style })` to add inline CSS to its overlay, then call `page.hideHighlight()` to clear all locator highlight overlays on that page.
await page.locator('<selector>').highlight({ style: 'outline: 2px dashed red' });
await page.hideHighlight();WHY THIS HELPS
Visually inspect a highlighted locator and then clear page highlights.
REQUIREMENTS AND LIMITATIONS
- Version: v1.60.0
- options.style: Inline CSS for the highlight overlay. Accepts a CSS string or an object of string, string-or-number values. The docs do not state these forms are mutually exclusive.
- selector (required): Selector used by `page.locator()` to resolve the DOM element.
- Prerequisite: Use Playwright v1.60.0 or later; `style` and `page.hideHighlight()` were added in v1.60.
FIRST-PARTY EVIDENCE
- https://github.com/microsoft/playwright/releases/tag/v1.60.0
- https://playwright.dev/docs/api/class-locator#locator-highlight
- https://playwright.dev/docs/api/class-page#page-locator
Check the installed version and the source before using it. Entry JSON