{
  "doc": {
    "id": "ui-coverage/core-concepts/element-grouping",
    "title": "Group related elements | Cypress UI Coverage",
    "description": "UI Coverage groups elements that are related to one another through structural or behavioral hints, but this is configurable.",
    "section": "ui-coverage",
    "source_path": "/llm/markdown/ui-coverage/core-concepts/element-grouping.md",
    "version": "a8fd16711bdda4c7b5645b9717e588ae99ec2470",
    "updated_at": "2026-05-18T17:21:32.047Z",
    "headings": [
      {
        "id": "ui-coverage/core-concepts/element-grouping#element-grouping",
        "text": "Element Grouping",
        "level": 1
      },
      {
        "id": "ui-coverage/core-concepts/element-grouping#how-element-grouping-works",
        "text": "How element grouping works",
        "level": 2
      },
      {
        "id": "ui-coverage/core-concepts/element-grouping#grouping-rules",
        "text": "Grouping Rules",
        "level": 2
      },
      {
        "id": "ui-coverage/core-concepts/element-grouping#example",
        "text": "Example",
        "level": 3
      },
      {
        "id": "ui-coverage/core-concepts/element-grouping#customizing-element-grouping",
        "text": "Customizing element grouping",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "ui-coverage/core-concepts/element-grouping#how-element-grouping-works",
      "doc_id": "ui-coverage/core-concepts/element-grouping",
      "heading": "How element grouping works",
      "heading_level": 2,
      "content_markdown": "## How element grouping works\n\nUI 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.\n",
      "section": "ui-coverage",
      "anchors": [
        "how-element-grouping-works"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/element-grouping.json",
      "token_estimate": 45
    },
    {
      "id": "ui-coverage/core-concepts/element-grouping#grouping-rules",
      "doc_id": "ui-coverage/core-concepts/element-grouping",
      "heading": "Grouping Rules",
      "heading_level": 2,
      "content_markdown": "## Grouping Rules\n\n*   **User-Defined Groups**: Elements are grouped by [Element Groups](/llm/markdown/ui-coverage/configuration/elementgroups.md) configuration if specified.\n*   **Labels and Form Elements**: `label` elements are automatically grouped with the form elements they are associated with.\n*   **Table Row Grouping**: Elements within table rows are grouped with elements sharing common attributes or the same position across rows.\n*   **Repeated Elements**: Duplicate elements in the DOM with shared attributes are grouped.\n*   **Parent-Shared Attributes**: Duplicate elements with parents that share common attributes are grouped.\n*   **Dynamic Links**: Links with similar `href` patterns are resolved into [views](/llm/markdown/ui-coverage/configuration/views.md) and grouped by their `href` pattern.\n\n### Example\n\nConsider a table where each row contains a delete button:\n\n```\n<table>  <tr>    <td>John Doe</td>    <td>      <button>Delete</button>    </td>  </tr>  <tr>    <td>Jane Smith</td>    <td>      <button>Delete</button>    </td>  </tr></table>\n```\n\nIn 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.\n",
      "section": "ui-coverage",
      "anchors": [
        "grouping-rules"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/element-grouping.json",
      "token_estimate": 211
    },
    {
      "id": "ui-coverage/core-concepts/element-grouping#example",
      "doc_id": "ui-coverage/core-concepts/element-grouping",
      "heading": "Example",
      "heading_level": 3,
      "content_markdown": "### Example\n\nConsider a table where each row contains a delete button:\n\n```\n<table>  <tr>    <td>John Doe</td>    <td>      <button>Delete</button>    </td>  </tr>  <tr>    <td>Jane Smith</td>    <td>      <button>Delete</button>    </td>  </tr></table>\n```\n\nIn 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.\n",
      "section": "ui-coverage",
      "anchors": [
        "example"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/element-grouping.json",
      "token_estimate": 80
    },
    {
      "id": "ui-coverage/core-concepts/element-grouping#customizing-element-grouping",
      "doc_id": "ui-coverage/core-concepts/element-grouping",
      "heading": "Customizing element grouping",
      "heading_level": 2,
      "content_markdown": "## Customizing element grouping\n\nYou can customize element grouping to suit your application's structure and behavior. Refer to the [Element Groups](/llm/markdown/ui-coverage/configuration/elementgroups.md) configuration guide to learn how to define custom groups and group elements based on specific attributes or selectors.\n",
      "section": "ui-coverage",
      "anchors": [
        "customizing-element-grouping"
      ],
      "path": "/llm/json/chunked/ui-coverage/core-concepts/element-grouping.json",
      "token_estimate": 52
    }
  ]
}