Class Highlight

Manages a visible highlight around an ElementHandle.

Remarks

A highlight is a colored transparent marker that appears around an element. It point users to important data or fields that they should acknowledge, double-check, confirm, or edit. Highlights do not block clicks or other user actions.

The highlight reacts to changes in element size, but not to element existence, and is not reapplied after page navigation. For that, use the highlightSelector or highlightXpath helpers. The highlight is appended to the element's scroll container and will follow scrolling and display with the correct z-index.

The highlight must be started to find the element and apply the marker, and it can be removed from the DOM by calling stop().

Note: In general, you will want to use the highlightSelector or highlightXpath helpers instead; this class is mostly intended to build your own helpers.

Example

const el = await page.$('.myElement');
const highlight = new Highlight(ctx, el, {color: '#BEEEEF'});
// ...
highlight.stop();
Copy

Creates a highlight around the element.

Removes the created highlight from the DOM.