{
  "doc": {
    "id": "ui-coverage/configuration/elementfilters",
    "title": "Element Filters | Cypress UI Coverage",
    "description": "The `elementFilters` property allows you to specify selectors for elements that should be excluded from UI Coverage.",
    "section": "ui-coverage",
    "source_path": "/llm/markdown/ui-coverage/configuration/elementfilters.md",
    "version": "204dffbf7fbb64b1fe8343a54ddcd869cc275f1f",
    "updated_at": "2026-05-12T20:33:17.938Z",
    "headings": [
      {
        "id": "ui-coverage/configuration/elementfilters#elementfilters",
        "text": "elementFilters",
        "level": 1
      },
      {
        "id": "ui-coverage/configuration/elementfilters#why-use-element-filters",
        "text": "Why use element filters?",
        "level": 2
      },
      {
        "id": "ui-coverage/configuration/elementfilters#syntax",
        "text": "Syntax",
        "level": 2
      },
      {
        "id": "ui-coverage/configuration/elementfilters#options",
        "text": "Options",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#examples",
        "text": "Examples",
        "level": 2
      },
      {
        "id": "ui-coverage/configuration/elementfilters#excluding-a-specific-element",
        "text": "Excluding a specific element",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#excluding-all-elements-in-a-container",
        "text": "Excluding all elements in a container",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#including-only-elements-in-a-specific-container",
        "text": "Including only elements in a specific container",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#excluding-elements-by-attribute",
        "text": "Excluding Elements by Attribute",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#excluding-dynamic-elements-by-pattern",
        "text": "Excluding dynamic elements by pattern",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#scoping-selectors-to-shadow-dom",
        "text": "Scoping selectors to shadow DOM",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#scoping-selectors-to-iframes",
        "text": "Scoping selectors to iframes",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#scoping-to-nested-documents",
        "text": "Scoping to nested documents",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#filtering-all-elements-within-a-document-scope",
        "text": "Filtering all elements within a document scope",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#excluding-disabled-elements",
        "text": "Excluding disabled elements",
        "level": 3
      },
      {
        "id": "ui-coverage/configuration/elementfilters#config",
        "text": "Config",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#html",
        "text": "HTML",
        "level": 4
      },
      {
        "id": "ui-coverage/configuration/elementfilters#elements-shown-in-ui",
        "text": "Elements shown in UI",
        "level": 4
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "elementFilters"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The `elementFilters` property allows you to specify selectors for elements that should be excluded from reports."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Why use element filters?"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Ignoring 3rd Party Components: Libraries or widgets that are not part of your application logic may be excluded from reports."
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Streamlining Reports: Reducing noise by filtering out non-essential elements makes reports more actionable."
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Syntax"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Note: setting `elementFilters` impacts both Accessibility and UI Coverage reports if set at the root of the configuration. Nesting this property under an `accessibility` or `uiCoverage` key is supported, if you need to split them up."
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": string,      \"include\": boolean,      \"documentScope\": [string],      \"comment\": string    }  ]}"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Options"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "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."
          }
        ]
      },
      {
        "type": "table",
        "align": [
          null,
          null,
          null,
          null
        ],
        "children": [
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Option"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Required"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Default"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Description"
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`selector`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Required"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": []
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "A CSS selector to identify elements. Supports standard CSS selector syntax, including IDs, classes, attributes, and combinators."
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`include`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Optional"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`true`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "A boolean indicating whether the matched elements should be included in the report."
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`documentScope`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Optional"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": []
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "An array of CSS selectors that identify document hosts (iframes or shadow DOM hosts) that must be ancestors of the matched element. The selector will only match if all specified document hosts are found in the element's ancestor chain."
                  }
                ]
              }
            ]
          },
          {
            "type": "tableRow",
            "children": [
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "`comment`"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "Optional"
                  }
                ]
              },
              {
                "type": "tableCell",
                "children": []
              },
              {
                "type": "tableCell",
                "children": [
                  {
                    "type": "text",
                    "value": "A comment describing the purpose of this filter rule."
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Examples"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Excluding a specific element"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"#button-2\",      \"include\": false,      \"comment\": \"Exclude test-only button from reports\"    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button id=\"button-1\">Included</button>  <button id=\"button-2\">Excluded</button></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#button-1"
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Excluding all elements in a container"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"footer *\",      \"include\": false    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <main>    <button id=\"start\">Included</button>  </main>  <footer>    <a href=\"#\">Excluded</a>  </footer></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#start"
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Including only elements in a specific container"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"#form *\",      \"include\": true    },    {      \"selector\": \"*\",      \"include\": false    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <form id=\"form\">    <input id=\"name\" />  </form>  <footer>    <a href=\"#\">Excluded</a>  </footer></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#name"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Excluding Elements by Attribute"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"[data-role='decorative']\",      \"include\": false    }  ]}"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button data-role=\"decorative\">    <img src=\"icon.png\" />  </button>  <button data-role=\"primary\">    View  </button></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "[data-role=\"primary\"]"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Excluding dynamic elements by pattern"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"[class^='auth']\",      \"include\": false    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button class=\"cancel\">Cancel</button>  <button class=\"auth908283794\">Login</button></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": ".cancel"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Scoping selectors to shadow DOM"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "When you need to filter elements within a specific shadow DOM host, use the `documentScope` property to scope your selector to that document context."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"#my-button\",      \"include\": false,      \"documentScope\": [\"custom-component\"]    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button id=\"my-button\">Button Outside Shadow DOM - Important</button>  <custom-component>    #shadow-dom      <button id=\"my-button\">Button Inside Shadow DOM - Not Important</button>  </custom-component></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#my-button (from root document)"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Only the button inside the shadow DOM is filtered, while the button in the root document remains in the report."
          }
        ]
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Scoping selectors to iframes"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can also scope selectors to elements within specific iframes using `documentScope`."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"#my-button\",      \"include\": false,      \"documentScope\": [\"#my-iframe\"]    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button id=\"my-button\">Button Outside Iframe - Important</button>  <iframe src=\"http://www.foo.com\" id=\"my-iframe\">    <html>      <body>        <button id=\"my-button\">Button Inside Iframe - Not Important</button>      </body>    </html>  </iframe></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#my-button (from root document)"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Only the button inside the iframe is filtered."
          }
        ]
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Scoping to nested documents"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can chain multiple document hosts in the `documentScope` array to target elements within nested documents (e.g., an iframe containing a shadow DOM component)."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"#my-button\",      \"include\": false,      \"documentScope\": [\"iframe\", \"custom-component\"]    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button id=\"my-button\">Button Outside Iframe - Important</button>  <iframe src=\"http://www.foo.com\">    <html>      <body>        <button id=\"my-button\">Button Inside Iframe - Not Important</button>        <custom-component>          #shadow-dom            <button id=\"my-button\">Button Inside Shadow DOM - Not Important</button>        </custom-component>      </body>    </html>  </iframe></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#my-button (from root document)#my-button (from iframe)"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Only the button inside the shadow DOM (which is nested within the iframe) is filtered."
          }
        ]
      },
      {
        "type": "thematicBreak"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Filtering all elements within a document scope"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can use a wildcard selector with `documentScope` to filter all elements within a specific document host."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"*\",      \"include\": false,      \"documentScope\": [\"external-component\"]    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button id=\"important\">Important Button</button>  <external-component>    #shadow-dom      <button id=\"unimportant-1\">Unimportant</button>      <input id=\"unimportant-2\" />      <a href=\"#\" id=\"unimportant-3\">Link</a>  </external-component></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "#important"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "All elements within the `external-component` shadow DOM are filtered from the report."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Excluding disabled elements"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "UI Coverage highlights disabled elements by default to reveal potential untested paths in your app, in case those elements become enabled later. If needed, you can exclude them from the report using the `elementFilters` configuration."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Config"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "{  \"elementFilters\": [    {      \"selector\": \"[disabled]\",      \"include\": false    }  ]}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "HTML"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "<body>  <button data-cy='cancel'>Cancel</button>  <button disabled data-cy='submit'>Submit</button></body>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Elements shown in UI"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "[data-cy='cancel']"
      }
    ]
  },
  "token_estimate": 1261
}