Skip to main content
UI CoveragePremium Solution

Ignore elements

Not all elements in your application are relevant to your test coverage. Cypress UI Coverage lets you exclude specific elements from coverage reports, so your score and untested-elements list focus on the elements your team is responsible for testing. This guide walks through finding the right elements to ignore and configuring the filters.

Why ignore elements?​

Ignoring elements helps in scenarios like these:

  • Third-Party Widgets: Exclude elements controlled by external libraries or services, such as chat launchers or cookie banners, that your tests will never interact with.
  • Out-of-Scope Elements: Exclude test-only controls or areas of the application that you've decided not to test.

An excluded element is removed from the report entirely and doesn't count toward your coverage score, whether it was tested or not.

Identify Elements to Ignore​

After recording your tests to Cypress Cloud, review the UI Coverage reports:

  1. Navigate to the UI Coverage tab in your test run.
  2. Look for untested elements that don't require testing.
  3. Note down the selectors, attributes, or patterns for these elements.

Configure Ignored Elements​

Add an elementFilters configuration in the App Quality tab of your project settings. Each rule pairs a CSS selector with include: false to exclude the elements it matches:

App Quality Config
{
  "elementFilters": [
    {
      "selector": "[data-external]",
      "include": false,
      "comment": "Elements our tests never interact with"
    },
    {
      "selector": ".rdrDateRangePicker, .rdrDateRangePicker *",
      "include": false,
      "comment": "Third-party date picker library"
    }
  ]
}

A few things to keep in mind when writing rules:

  • The selector must match the interactive elements themselves, not just a container around them. To exclude everything within a container, include its descendants in the selector, as the date picker example above does.
  • To exclude the contents of an iframe or shadow DOM, combine a selector with documentScope:
App Quality Config
{
  "elementFilters": [
    {
      "selector": "*",
      "include": false,
      "documentScope": ["iframe[title='Login']"],
      "comment": "Embedded third-party login form"
    }
  ]
}

For all options and how rules are evaluated, including rule ordering and documentScope, see the elementFilters reference.

Validate Ignored Elements​

After saving the configuration, regenerate a recent run from its Properties tab and review the UI Coverage report. The ignored elements should no longer appear, and your score should reflect only the elements you intend to test. There's no need to rerun your tests to see the effect of a configuration change.

If new irrelevant elements appear in future reports, update your filters accordingly to keep reports clean and actionable.

Contents