Comparer

Compares HTML or document snapshots.

Access:

app.getService('comparer')

App code:

const comparer = app.getService('comparer');

Plugin:

const comparer = this.app.getService('comparer');

hasAttributes#

Returns whether all specified attributes exist on the element with matching values (or existence only when value is null/undefined/true).

Parameters:

• el (HTMLElement | string) — DOM element
• attrs (object) — HTML attributes ({ name: value }; true / null sets a boolean attribute)

Returns: boolean

comparer.hasAttributes(el, { href: 'https://example.com' });

compareAttributes#

Compares element attributes against expected values and returns matched, missing, and different entries.

Parameters:

• el (HTMLElement | string) — DOM element
• attrs (object) — HTML attributes ({ name: value }; true / null sets a boolean attribute)

Returns: { ok: boolean, matched: object[], missing: object[], different: object[] }

comparer.compareAttributes(el, { target: '_blank' });

hasClasses#

Returns whether the element contains all specified CSS class names.

Parameters:

• el (HTMLElement | string) — DOM element
• classes (string | string[]) — CSS class names to toggle

Returns: boolean

comparer.hasClasses(el, ['active', 'bold']);

compareClasses#

Compares element classList against expected class names and returns matched and missing lists.

Parameters:

• el (HTMLElement | string) — DOM element
• classes (string | string[]) — CSS class names to toggle

Returns: { ok: boolean, matched: string[], missing: string[], existing: string[] }

comparer.compareClasses(el, 'bold italic');

hasStyles#

Returns whether all specified inline style properties match the element style attribute (normalized).

Parameters:

• el (HTMLElement | string) — DOM element
• styles (object) — CSS declarations ({ color: '#f00' } or { backgroundColor: 'yellow' })

Returns: boolean

comparer.hasStyles(el, { 'font-weight': 'bold' });

compareStyles#

Compares inline style attribute properties against expected values with optional exact mode that flags unexpected extra properties.

Parameters:

• el (HTMLElement | string) — DOM element
• styles (object) — CSS declarations ({ color: '#f00' } or { backgroundColor: 'yellow' })
• exact (boolean) — require an exact match instead of a partial one

Returns: { ok: boolean, matched: object[], missing: object[], different: object[] }

comparer.compareStyles(el, { color: '#ff0000' });

matches#

Returns whether the element matches all provided attribute, class, and style criteria combined.

Parameters:

• el (HTMLElement | string) — DOM element
• attrs (object) — HTML attributes ({ name: value }; true / null sets a boolean attribute)
• classes (string | string[]) — CSS class names to toggle
• styles (object) — CSS declarations ({ color: '#f00' } or { backgroundColor: 'yellow' })

Returns: boolean

comparer.matches(el, { classes: ['link'], attrs: { href: true } });

compare#

Runs attribute, class, and style comparisons together and returns per-category results with an overall ok flag.

Parameters:

• el (HTMLElement | string) — DOM element
• attrs (object) — HTML attributes ({ name: value }; true / null sets a boolean attribute)
• classes (string | string[]) — CSS class names to toggle
• styles (object) — CSS declarations ({ color: '#f00' } or { backgroundColor: 'yellow' })

Returns: { ok: boolean, attrs: object|null, classes: object|null, styles: object|null }

comparer.compare(el, { styles: { color: 'red' } });