Skip to main content

elementFilters

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.

info

Note: setting elementFilters impacts both Accessibility and UI Coverage reports. Nesting this property under an accessibility or uiCoverage key is supported, if you need to split them up.

By default, every interactive and visible element is included in UI Coverage. The elementFilters property allows you to specify selectors for elements that should be excluded from UI Coverage.

For every element considered interactive and visible by UI Coverage, the first elementFilters rule for which the selector property matches the element is used to either include or exclude the element based on the include value. Elements that do not match any rules are included by default.

Syntax​

{
  "elementFilters": [
    {
      "selector": string,
      "include": boolean
    }
  ]
}

elementFilters​

Optional. Object[]

An array of objects used to specify elements to exclude from UI Coverage. Each object can have the following properties:

selector​

Required. String (CSS Selector)

Used to match elements.

include​

Optional. Boolean

Default: true

A boolean that represents whether or not a matched element should be included in UI Coverage.

Examples​

Excluding a specific element​

Config​

{
  "elementFilters": [
    {
      "selector": "#button-2",
      "include": false
    }
  ]
}

HTML​

<body>
  <button id="button-1">Included</button>
  <button id="button-2">Excluded</button>
</body>

Elements shown in UI​

#button-1

Excluding all elements in a container​

Config​

{
  "elementFilters": [
    {
      "selector": "footer *",
      "include": false
    }
  ]
}

HTML​

<body>
  <main>
    <button id="start">Included</button>
  </main>
  <footer>
    <a href="#">Excluded</a>
  </footer>
</body>

Elements shown in UI​

#start

Including only elements in a container​

Config​

{
  "elementFilters": [
    {
      "selector": "#form *",
      "include": true
    },
    {
      "selector": "*",
      "include": false
    }
  ]
}

HTML​

<body>
  <form id="form">
    <input id="name" />
  </form>
  <footer>
    <a href="#">Excluded</a>
  </footer>
</body>

Elements shown in UI​

#name

Contents