Skip to main content
UI Coverage+ Add-on

significantAttributes

UI Coverage provides logic to automatically identify and group elements based on their attributes and DOM structure. However, your application may rely on custom attributes for identification that are not prioritized by default in UI Coverage. The significantAttributes configuration allows you to specify these attributes, ensuring accurate identification and grouping.

Why use significant attributes?​

  • Handle Custom Identifiers: Prioritize custom attributes like data-custom-id that are essential for identifying elements in your application.
  • Avoid Misclassification: In cases where elements share generic attributes like class or name, prioritizing more specific attributes prevents incorrect grouping.
  • Streamline Dynamic Elements: Attributes that change dynamically can disrupt accurate identification. Specifying significant attributes ensures stability.

Syntax​

{
  "uiCoverage": {
    "significantAttributes": [
      string
    ]
  }
}

Options​

The attributes listed in significantAttributes are considered "significant" and are prioritized above the default significant attributes, but below data-cy-ui-id and data-cy-ui-group, for the purpose of identification and grouping.

OptionRequiredDefaultDescription
significantAttributesRequiredAn array of attribute names to prioritize for element identification and grouping.Supports any valid HTML attribute names.

Examples​

Consider a custom attribute significant​

Config​

{
  "uiCoverage": {
    "significantAttributes": ["data-role"]
  }
}

HTML​

<form>
  <input id="in1" data-role="email"></input>
  <input id="in2" data-role="interests"></input>
  <input id="in3" data-role="interests"></input>
</form>

Elements shown in UI Coverage​

[data-role="email"]
[data-role="interests"] (2 instances)

Prioritize stable attributes over dynamic​

Config​

{
  "uiCoverage": {
    "significantAttributes": ["data-type"]
  }
}

HTML​

<ul>
  <li row-id="10829" data-type="search">Search</li>
  <li row-id="38019" data-type="filter">Filter</li>
</ul>

Elements shown in UI Coverage​

[data-type="search"]
[data-type="filter"]

Define aria attributes as significant​

Config​

{
  "uiCoverage": {
    "significantAttributes": ["aria-label"]
  }
}

HTML​

<button data-cy="close" aria-label="Close">X</button>
<button data-cy="submit">Save</button>

Elements shown in UI Coverage​

[aria-label="Close"]
[data-cy="submit"]

Contents