{ "doc": { "id": "ui-coverage/guides/reduce-noise", "title": "Reduce noise in UI Coverage reports", "description": "A workflow for turning a noisy UI Coverage report into an actionable one: recognize the noise, diagnose its cause, apply the matching fix, and validate.", "section": "ui-coverage", "source_path": "/llm/markdown/ui-coverage/guides/reduce-noise.md", "version": "fbc9225067c51c52ee13224e3b702cf8a025ec12", "updated_at": "2026-08-14T12:36:26.878Z", "headings": [ { "id": "ui-coverage/guides/reduce-noise#reduce-noise", "text": "Reduce noise", "level": 1 }, { "id": "ui-coverage/guides/reduce-noise#step-1-recognize-the-noise", "text": "Step 1: Recognize the noise", "level": 2 }, { "id": "ui-coverage/guides/reduce-noise#step-2-diagnose-and-apply-the-matching-fix", "text": "Step 2: Diagnose and apply the matching fix", "level": 2 }, { "id": "ui-coverage/guides/reduce-noise#many-similar-elements-group-them", "text": "Many similar elements → group them", "level": 3 }, { "id": "ui-coverage/guides/reduce-noise#one-element-splitting-into-many-stabilize-its-identity", "text": "One element splitting into many → stabilize its identity", "level": 3 }, { "id": "ui-coverage/guides/reduce-noise#noisy-or-meaningless-attributes-tune-identification", "text": "Noisy or meaningless attributes → tune identification", "level": 3 }, { "id": "ui-coverage/guides/reduce-noise#too-many-near-identical-pages-group-views", "text": "Too many near-identical pages → group views", "level": 3 }, { "id": "ui-coverage/guides/reduce-noise#step-3-validate-the-result", "text": "Step 3: Validate the result", "level": 2 }, { "id": "ui-coverage/guides/reduce-noise#see-also", "text": "See also", "level": 2 } ] }, "chunks": [ { "id": "ui-coverage/guides/reduce-noise#step-1-recognize-the-noise", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "Step 1: Recognize the noise", "heading_level": 2, "content_markdown": "## Step 1: Recognize the noise\n\nOpen the **UI Coverage** tab for a recent run and look for these patterns:\n\n* **One element appears many times.** A control with the same purpose shows up as several separate untested entries, often because its `id` or another attribute is generated fresh on each render.\n* **A group of similar elements each listed separately.** A navigation bar, list, or set of form fields where every item is its own entry, inflating the count without adding insight.\n* **Too many views.** Pages that differ only by a slug (`/products/wireless-mouse`, `/products/usb-c-cable`) appear as distinct views, spreading coverage across pages you think of as one.\n* **Elements identified by unstable attributes.** Selectors in the report are built from stateful or hashed attributes (like a `data-headlessui-state` toggle or a hashed `css-1a2b3c` class) instead of the stable attributes your team recognizes. This can produce noise between pages, but also between runs when using Branch Review to [compare reports](/llm/markdown/ui-coverage/guides/compare-reports.md).\n", "section": "ui-coverage", "anchors": [ "step-1-recognize-the-noise" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 213 }, { "id": "ui-coverage/guides/reduce-noise#step-2-diagnose-and-apply-the-matching-fix", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "Step 2: Diagnose and apply the matching fix", "heading_level": 2, "content_markdown": "## Step 2: Diagnose and apply the matching fix\n\nEach pattern from Step 1 maps to one of the fixes below. Configure them in the **App Quality** tab of your project settings, under the `uiCoverage` key.\n\n### Many similar elements → group them\n\nWhen several elements share the same function and differ only by a generated value, group them into a single entry with `elementGroups`. This is the right choice for a control that repeats, such as an action button on every row of a list.\n\nGiven a list of rows that each repeat the same action, where the button's `id` is generated from the row's record ID:\n\n```\n\n```\n\nEvery **Remove** button does the same thing, so you want to know that interaction is covered without tracking each row separately. Group them by their stable prefix:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"elementGroups\": [ { \"selector\": \".cart [id^='remove-item-']\" } ] }}\n```\n\nThe report now shows a single entry instead of three, named `.cart [id^='remove-item-']` with a badge showing the number of grouped elements. Hovering the badge reads _3 instances grouped by configuration_.\n\nSee the [Element Groups](/llm/markdown/ui-coverage/configuration/elementgroups.md) reference for all options.\n\nGroup only elements that share the same purpose. Grouping controls that do different things, or distinct links you want covered separately, hides real gaps instead of reducing noise.\n\n### One element splitting into many → stabilize its identity\n\nWhen a _single_ element appears as several untested entries because a generated attribute changes between snapshots, identify it by a selector you choose with an `elements` rule, and optionally give it a readable name:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"elements\": [ { \"selector\": \"input[id^='downshift-'][id$='-input']\", \"name\": \"Search input\" } ] }}\n```\n\nThe rule applies only when its selector matches exactly one interactive element in a snapshot. If many elements share the same generated attribute, group them with `elementGroups` (above) or filter the attribute (below) instead. See the [Elements](/llm/markdown/ui-coverage/configuration/elements.md) reference for details.\n\n### Noisy or meaningless attributes → tune identification\n\nIf elements are being identified by the wrong attributes, steer Cypress toward the attributes you care about and away from the ones you don't.\n\nPrioritize your own stable attributes with `significantAttributes`:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"significantAttributes\": [\"data-testid\"] }}\n```\n\nCypress already filters the most common unstable attributes, so use `attributeFilters` only for the ones it misses. This example keeps your `data-cy` hook while ignoring the `data-*` state attributes component libraries toggle as the UI changes:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"attributeFilters\": [ { \"attribute\": \"data-cy\", \"include\": true, \"comment\": \"Always identify elements by our test hook\" }, { \"attribute\": \"data-.*\", \"include\": false, \"comment\": \"Ignore library state attributes like data-state, data-headlessui-state\" } ] }}\n```\n\nSee the [Significant Attributes](/llm/markdown/ui-coverage/configuration/significantattributes.md) and [Attribute Filters](/llm/markdown/ui-coverage/configuration/attributefilters.md) references for the full matching rules.\n\n### Too many near-identical pages → group views\n\nCypress groups URLs that differ only by numeric IDs or UUIDs automatically, but not ones that differ by a slug or name. When these product pages share a template you want reported as one view, consolidate them with a `views` pattern:\n\n```\n/products/wireless-mouse/products/wireless-mouse?ref=email/products/usb-c-cable/products/laptop-stand#reviews\n```\n\nCollapse them into one view. Leaving the protocol and hostname off the pattern lets it match these paths on any environment your tests run against:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"views\": [ { \"pattern\": \"/products/*\" } ] }}\n```\n\nSee the [Views](/llm/markdown/ui-coverage/configuration/views.md) reference for pattern syntax.\n", "section": "ui-coverage", "anchors": [ "step-2-diagnose-and-apply-the-matching-fix" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 777 }, { "id": "ui-coverage/guides/reduce-noise#many-similar-elements-group-them", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "Many similar elements → group them", "heading_level": 3, "content_markdown": "### Many similar elements → group them\n\nWhen several elements share the same function and differ only by a generated value, group them into a single entry with `elementGroups`. This is the right choice for a control that repeats, such as an action button on every row of a list.\n\nGiven a list of rows that each repeat the same action, where the button's `id` is generated from the row's record ID:\n\n```\n\n```\n\nEvery **Remove** button does the same thing, so you want to know that interaction is covered without tracking each row separately. Group them by their stable prefix:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"elementGroups\": [ { \"selector\": \".cart [id^='remove-item-']\" } ] }}\n```\n\nThe report now shows a single entry instead of three, named `.cart [id^='remove-item-']` with a badge showing the number of grouped elements. Hovering the badge reads _3 instances grouped by configuration_.\n\nSee the [Element Groups](/llm/markdown/ui-coverage/configuration/elementgroups.md) reference for all options.\n\nGroup only elements that share the same purpose. Grouping controls that do different things, or distinct links you want covered separately, hides real gaps instead of reducing noise.\n", "section": "ui-coverage", "anchors": [ "many-similar-elements-group-them" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 273 }, { "id": "ui-coverage/guides/reduce-noise#one-element-splitting-into-many-stabilize-its-identity", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "One element splitting into many → stabilize its identity", "heading_level": 3, "content_markdown": "### One element splitting into many → stabilize its identity\n\nWhen a _single_ element appears as several untested entries because a generated attribute changes between snapshots, identify it by a selector you choose with an `elements` rule, and optionally give it a readable name:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"elements\": [ { \"selector\": \"input[id^='downshift-'][id$='-input']\", \"name\": \"Search input\" } ] }}\n```\n\nThe rule applies only when its selector matches exactly one interactive element in a snapshot. If many elements share the same generated attribute, group them with `elementGroups` (above) or filter the attribute (below) instead. See the [Elements](/llm/markdown/ui-coverage/configuration/elements.md) reference for details.\n", "section": "ui-coverage", "anchors": [ "one-element-splitting-into-many-stabilize-its-identity" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 137 }, { "id": "ui-coverage/guides/reduce-noise#noisy-or-meaningless-attributes-tune-identification", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "Noisy or meaningless attributes → tune identification", "heading_level": 3, "content_markdown": "### Noisy or meaningless attributes → tune identification\n\nIf elements are being identified by the wrong attributes, steer Cypress toward the attributes you care about and away from the ones you don't.\n\nPrioritize your own stable attributes with `significantAttributes`:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"significantAttributes\": [\"data-testid\"] }}\n```\n\nCypress already filters the most common unstable attributes, so use `attributeFilters` only for the ones it misses. This example keeps your `data-cy` hook while ignoring the `data-*` state attributes component libraries toggle as the UI changes:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"attributeFilters\": [ { \"attribute\": \"data-cy\", \"include\": true, \"comment\": \"Always identify elements by our test hook\" }, { \"attribute\": \"data-.*\", \"include\": false, \"comment\": \"Ignore library state attributes like data-state, data-headlessui-state\" } ] }}\n```\n\nSee the [Significant Attributes](/llm/markdown/ui-coverage/configuration/significantattributes.md) and [Attribute Filters](/llm/markdown/ui-coverage/configuration/attributefilters.md) references for the full matching rules.\n", "section": "ui-coverage", "anchors": [ "noisy-or-meaningless-attributes-tune-identification" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 185 }, { "id": "ui-coverage/guides/reduce-noise#too-many-near-identical-pages-group-views", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "Too many near-identical pages → group views", "heading_level": 3, "content_markdown": "### Too many near-identical pages → group views\n\nCypress groups URLs that differ only by numeric IDs or UUIDs automatically, but not ones that differ by a slug or name. When these product pages share a template you want reported as one view, consolidate them with a `views` pattern:\n\n```\n/products/wireless-mouse/products/wireless-mouse?ref=email/products/usb-c-cable/products/laptop-stand#reviews\n```\n\nCollapse them into one view. Leaving the protocol and hostname off the pattern lets it match these paths on any environment your tests run against:\n\nApp Quality Config\n\n```\n{ \"uiCoverage\": { \"views\": [ { \"pattern\": \"/products/*\" } ] }}\n```\n\nSee the [Views](/llm/markdown/ui-coverage/configuration/views.md) reference for pattern syntax.\n", "section": "ui-coverage", "anchors": [ "too-many-near-identical-pages-group-views" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 133 }, { "id": "ui-coverage/guides/reduce-noise#step-3-validate-the-result", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "Step 3: Validate the result", "heading_level": 2, "content_markdown": "## Step 3: Validate the result\n\nConfiguration changes are applied when a report is generated, so you don't need to rerun your tests to see their effect. After saving your configuration, regenerate a recent run from its **Properties** tab.\n\nThen reopen the UI Coverage report and confirm that:\n\n* The elements you grouped now appear as a single entry.\n* The element you stabilized no longer splits across snapshots.\n* The views you consolidated are reported together.\n* The overall element and view counts have dropped to reflect real coverage rather than duplication.\n\nIf new noise appears in future reports as your application grows, repeat this loop (recognize, diagnose, apply, validate) to keep the report actionable.\n", "section": "ui-coverage", "anchors": [ "step-3-validate-the-result" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 155 }, { "id": "ui-coverage/guides/reduce-noise#see-also", "doc_id": "ui-coverage/guides/reduce-noise", "heading": "See also", "heading_level": 2, "content_markdown": "## See also\n\n* [Ignore elements](/llm/markdown/ui-coverage/guides/ignore-elements.md): remove elements from the report entirely instead of grouping them.\n* [Ignore views and links](/llm/markdown/ui-coverage/guides/ignore-views-and-links.md): remove whole pages from the report.\n* [Element Identification](/llm/markdown/ui-coverage/core-concepts/element-identification.md) and [Element Grouping](/llm/markdown/ui-coverage/core-concepts/element-grouping.md): the concepts behind how Cypress identifies and consolidates elements.\n* [Reduce test duplication](/llm/markdown/ui-coverage/guides/reduce-test-duplication.md): the test-effort counterpart to this report-accuracy guide, for when the report is right but too many tests exercise the same control.\n", "section": "ui-coverage", "anchors": [ "see-also" ], "path": "/llm/json/chunked/ui-coverage/guides/reduce-noise.json", "token_estimate": 89 } ] }