diff --git a/docs/accessibility/configuration/elementfilters.mdx b/docs/accessibility/configuration/elementfilters.mdx
index f0954ebba0..3eef189eb8 100644
--- a/docs/accessibility/configuration/elementfilters.mdx
+++ b/docs/accessibility/configuration/elementfilters.mdx
@@ -11,8 +11,8 @@ sidebar_position: 20
:::info
-Note: setting `elementFilters` impacts both Accessibility and UI Coverage
-reports. Nesting this property under an `accessibility` or `uiCoverage` key is
+**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.
:::
diff --git a/docs/ui-coverage/configuration/_category_.json b/docs/ui-coverage/configuration/_category_.json
index ff6e7ca250..7f8cb5b6d7 100644
--- a/docs/ui-coverage/configuration/_category_.json
+++ b/docs/ui-coverage/configuration/_category_.json
@@ -1,4 +1,4 @@
{
"label": "Configuration",
- "position": 30
+ "position": 40
}
diff --git a/docs/ui-coverage/configuration/attributefilters.mdx b/docs/ui-coverage/configuration/attributefilters.mdx
index 415e47248c..6fc8e4b238 100644
--- a/docs/ui-coverage/configuration/attributefilters.mdx
+++ b/docs/ui-coverage/configuration/attributefilters.mdx
@@ -8,13 +8,15 @@ sidebar_label: attributeFilters
-UI Coverage has logic that automatically [identifies](/ui-coverage/core-concepts/element-identification) and [groups](/ui-coverage/core-concepts/element-grouping) elements based on their appearance and structure in the DOM.
+UI Coverage [identifies](/ui-coverage/core-concepts/element-identification) and [groups](/ui-coverage/core-concepts/element-grouping) 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.
-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.
+By using `attributeFilters`, you can ensure UI Coverage selects more appropriate identifiers, leading to cleaner and more accurate coverage reports.
-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.
+## Why use attribute filters?
-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.
+- **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
@@ -32,49 +34,24 @@ For every attribute that an element has, the first `attributeFilters` rule for w
}
```
-### 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
+### Options
-_Optional._ Boolean
-
-_Default:_ `true`
+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.
-Whether or not a matched attribute should be used for element identification and grouping.
+| Option | Required | Default | Description |
+| ----------- | -------- | ------- | ---------------------------------------------------------------------- |
+| `attribute` | Required | | A regex string to match attribute names |
+| `value` | Optional | `.*` | A regex string to match attribute values |
+| `include` | Optional | `true` | A boolean to specify whether the matched attribute should be included. |
## Examples
### Excluding common auto-generated id values
-#### Config
-
```json
{
"uiCoverage": {
"attributeFilters": [
- {
- "attribute": "id",
- "value": "sizzle.*",
- "include": false
- },
{
"attribute": "id",
"value": ":r.*:",
@@ -89,12 +66,12 @@ Whether or not a matched attribute should be used for element identification and
```xml
-
-
+
+
```
-#### Elements shown in UI
+#### Elements shown in UI Coverage
```
[name="my-button"]
@@ -105,8 +82,6 @@ Whether or not a matched attribute should be used for element identification and
### Excluding auto-generated attribute names
-#### Config
-
```json
{
"uiCoverage": {
@@ -135,9 +110,38 @@ Whether or not a matched attribute should be used for element identification and
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-