Class: Highlight

Defined in: src/highlight/Highlight.tsx:46

Manages a visible highlight around an ElementHandle.

Remarks

See the constructor for documentation.

Constructors

Constructor

new Highlight(
   ctx: Context, 
   el: ElementHandle, 
   options?: HighlightOptions): Highlight;

Defined in: src/highlight/Highlight.tsx:88

Manages a visible highlight around an ElementHandle.

Parameters

Parameter	Type	Description
ctx	Context	Context object.
el	ElementHandle	The element to overlay with a highlight.
options?	HighlightOptions	Options for the highlight.

Returns

Highlight

The Highlight instance.

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();

Methods

start()

start(): Promise<void>;

Defined in: src/highlight/Highlight.tsx:99

Creates a highlight around the element.

Returns

Promise<void>

---

stop()

stop(): Promise<void>;

Defined in: src/highlight/Highlight.tsx:317

Removes the created highlight from the DOM.

Returns

Promise<void>