Skip to main content
UI Coverage+ Add-on

attributeFilters

UI Coverage identifies and groups elements based on their attributes and structure in the DOM. However, some attributes may be auto-generated, dynamic, or unrepresentative, leading to inaccurate identification or grouping. The attributeFilters configuration property allows you to exclude specific attributes or patterns that should not be used for these purposes.

By using attributeFilters, you can ensure UI Coverage selects more appropriate identifiers, leading to cleaner and more accurate coverage reports.

Why use attribute filters?​

  • Handling library-specific attributes: Attributes generated by libraries may not represent the element's purpose and should be ignored.
  • Improving grouping accuracy: By filtering out irrelevant attributes, you ensure similar elements are grouped correctly.
  • Streamlining reports: Eliminating noisy attributes reduces clutter in coverage reports, making them easier to interpret and act upon.

Syntax​

{
  "uiCoverage": {
    "attributeFilters": [
      {
        "attribute": string,
        "value": string,
        "include": boolean
      }
    ]
  }
}

Options​

For every attribute that an element has, the first attributeFilters rule for which the attribute property matches the attribute's name and the value property matches the attribute's value, the include value is used to determine whether or not the attribute will be used for element identification and grouping. Attributes that do not match any rules are included by default.

OptionRequiredDefaultDescription
attributeRequiredA regex string to match attribute names
valueOptional.*A regex string to match attribute values
includeOptionaltrueA boolean to specify whether the matched attribute should be included.

Examples​

Excluding common auto-generated id values​

{
  "uiCoverage": {
    "attributeFilters": [
      {
        "attribute": "id",
        "value": ":r.*:",
        "include": false
      }
    ]
  }
}

HTML​

<body>
  <button id=":r11:" name="my-button">Button 1</button>
  <button id=":r12:" name="other-button">Button 2</button>
</body>

Elements shown in UI Coverage​

[name="my-button"]
[name="other-button"]

Excluding auto-generated attribute names​

{
  "uiCoverage": {
    "attributeFilters": [
      {
        "attribute": "ng-include-me",
        "value": ".*",
        "include": true
      },
      {
        "attribute": "ng-.*",
        "value": ".*",
        "include": false
      }
    ]
  }
}

HTML​

<body>
  <button ng-include-me="my-button">Button 1</button>
  <button ng-but-not-me="other-button">Button 2</button>
</body>

Elements shown in UI Coverage​

[ng-include-me="my-button"]
:nth-child(2)

Ignoring dynamic attributes for accurate grouping​

{
  "uiCoverage": {
    "attributeFilters": [
      {
        "attribute": "data-cy",
        "value": "user-\\d+",
        "include": false
      }
    ]
  }
}

HTML​

<button data-cy="user-123" class="user">Harper</button>
<button data-cy="user-456" class="user">Amara</button>

Elements shown in UI Coverage​

.user (2 instances)

Contents