diff --git a/docs/ui-coverage/configuration/supplementalelements.mdx b/docs/ui-coverage/configuration/supplementalelements.mdx new file mode 100644 index 0000000000..d4a4855e82 --- /dev/null +++ b/docs/ui-coverage/configuration/supplementalelements.mdx @@ -0,0 +1,145 @@ +--- +title: 'Supplemental Elements | Cypress UI Coverage' +description: 'The `supplementalElements` configuration property allows you to specify parent elements that should be used to supply additional information for identifying and grouping elements.' +sidebar_label: supplementalElements +--- + +# supplementalElements + + + +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. + +Sometimes, an element may not have enough information for Cypress's UI Coverage algorithm to accurately perform 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. + +The `supplementalElements` configuration property allows users to specify selectors for parent elements that should be used to supply additional information for identifying and grouping elements, thereby allowing UI Coverage to find more suitable identifiers for elements nested within these supplemental elements. + +For every element considered interactive and visible by UI Coverage, each element above it in the DOM is run through the `supplementalElements` configuration. For each parent element that matches a `supplementalSelector`, its significant attributes will be used to help identify and group elements that match the corresponding `elementSelector`. If no `elementSelector` is specified, the supplemental information will be applied to all descendant elements. + +## Syntax + +```json +{ + "uiCoverage": { + "supplementalElements": [ + { + "supplementalSelector": string, + "elementSelector": string + } + ] + } +} +``` + +### supplementalElements + +_Optional._ Object\[] + +An array of objects used to determine which parent elements should be used to supply additional information for identifying and grouping elements. _**Each object can have the following properties:**_ + +### supplementalSelector + +_Required._ String (CSS Selector) + +Used to match the parent elements that should be used to supply additional information for identifying and grouping elements. + +### elementSelector + +_Optional._ String (CSS Selector) + +_Default_: `*` (matches any value). + +Used to match elements that should receive supplemental information. + +## Examples + +### Using a parent element to provide supplemental data for all elements + +#### Config + +```json +{ + "uiCoverage": { + "supplementalElements": [ + { + "supplementalSelector": ".page-container", + "elementSelector": "*" + } + ] + } +} +``` + +#### HTML + +```xml + + +
+ + +
+ + + + +
+ + +
+ +``` + +#### Elements shown in UI + +``` +#login-page #submit +#login-page #cancel +#signup-page #submit +#signup-page #cancel +``` + +### Using a parent element to provide supplemental data for specific elements + +#### Config + +```json +{ + "uiCoverage": { + "supplementalElements": [ + { + "supplementalSelector": ".page-container", + "elementSelector": "#submit" + } + ] + } +} +``` + +#### HTML + +```xml + + +
+ + +
+ + + + +
+ + +
+ +``` + +#### Elements shown in UI + +``` +#login-page #submit +#signup-page #submit +#cancel +```