sdk.highlight.highlight._constructor_

Home > @matterway/sdk > Highlight > Highlight > (constructor)

Highlight.Highlight.(constructor)

Manages a visible highlight around an ElementHandle.

Signature:

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

Parameters

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

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