Skip to main content

attributeFilters

tip

UI Coverage is a paid add-on. Schedule a demo today and see how easy it is to enhance your testing while speeding up your development process.

UI Coverage has logic that automatically identifies and groups elements based on their appearance and structure in the DOM.

Sometimes, an element may have attributes that are auto-generated or otherwise not representative of the element that Cypress's UI Coverage algorithm uses for identification and grouping. This can cause the same element to be identified as multiple different elements, or multiple different elements to be identified as the same element.

The attributeFilters configuration property allows users to specify patterns for attributes and their values that should not be used for identifying and grouping elements, thereby allowing UI Coverage to find more suitable identifiers for the impacted elements.

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.

Syntax​

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

attributeFilters​

Optional. Object[]

An array of objects used to determine whether or not an attribute will be used for element identification and grouping. Each object can have the following properties:

attribute​

Required. String (Regex)

Used to match the attribute names.

value​

Optional. String (Regex)

Default: .* (matches any value).

Used to match the attribute values.

include​

Optional. Boolean

Default: true

Whether or not a matched attribute should be used for element identification and grouping.

Examples​

Excluding common auto-generated id values​

Config​

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

HTML​

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

Elements shown in UI​

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

Excluding auto-generated attribute names​

Config​

{
  "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​

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

Contents