Element Grouping
Testing every element on a page is not always necessary when multiple elements share the same behavior. UI Coverage simplifies this by grouping related elements, allowing interactions with any element in the group to count as testing the entire group. This reduces redundancy and ensures efficient and accurate coverage. For example, options in a dropdown menu can be grouped if interacting with one option verifies the behavior of the entire set.
How element grouping works​
UI Coverage groups elements using structural and behavioral hints, along with user-defined configurations. When grouped, interacting with one element is considered equivalent to testing all elements in the group.
Grouping Rules​
- User-Defined Groups: Elements are grouped by Element Groups configuration if specified.
- Labels and Form Elements:
label
elements are automatically grouped with the form elements they are associated with. - Table Row Grouping: Elements within table rows are grouped with elements sharing common attributes or the same position across rows.
- Repeated Elements: Duplicate elements in the DOM with shared attributes are grouped.
- Parent-Shared Attributes: Duplicate elements with parents that share common attributes are grouped.
- Dynamic Links: Links with similar
href
patterns are resolved into views and grouped by theirhref
pattern.
Example​
Consider a table where each row contains a delete button:
<table>
<tr>
<td>John Doe</td>
<td>
<button>Delete</button>
</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>
<button>Delete</button>
</td>
</tr>
</table>
In this case, UI Coverage groups the delete buttons together in accordance with our grouping rules. Interacting with one delete button is equivalent to testing all delete buttons in the table.
Customizing element grouping​
You can customize element grouping to suit your application's structure and behavior. Refer to the Element Groups configuration guide to learn how to define custom groups and group elements based on specific attributes or selectors.