Class: Highlight

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

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:122

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 helper. 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 helper 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:133

Creates a highlight around the element.

Returns

Promise<void>

---

stop()

stop(): Promise<void>;

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

Removes the created highlight from the DOM.

Returns

Promise<void>