Skip to main content
UI覆盖率高级解决方案

elementGroups

UI 覆盖率提供了基于 DOM 结构自动分组元素的逻辑。但在某些场景下，您可能需要自定义这些分组以更好地适应应用程序功能或测试需求。elementGroups 配置允许您定义元素分组的自定义逻辑，从而提升覆盖率清晰度并简化分析。

为何使用元素分组？​

  • 提高分组准确性：确保具有共享属性但不同角色的元素被正确分组，避免错误分类。
  • 简化测试覆盖率报告：将相似元素（如导航按钮或列表项）分组可减少报告中的杂乱信息，提供更简洁的测试覆盖率视图。
  • 突出关键区域：使用有意义的组名来引起对关键应用区域（如表单控件）的关注。
  • 简化动态元素处理：将动态或重复元素（如轮播项或列表项）整合为单一逻辑组。

语法​

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": string,
        "name": string
      }
    ]
  }
}

选项​

对于 UI 覆盖率考虑到的每个元素，系统会使用第一个 selector 属性匹配该元素的 elementGroup 规则进行分组。未匹配任何规则的元素将由默认的 UI 覆盖率元素分组规则进行分组。

选项是否必填默认值描述
selector必填用于识别元素的 CSS 选择器。支持标准 CSS 选择器语法，包括 ID、类、属性和组合器。
name可选selector分组的可读名称，显示在 UI 覆盖率报告中。

示例​

通过选择器分组元素​

配置​

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": "[data-cy^='item-']"
      }
    ]
  }
}

HTML​

<body>
  <button data-cy="item-1"></button> <!-- 分组: [data-cy^='item-'] -->
  <button data-cy="item-2"></button> <!-- 分组: [data-cy^='item-'] -->
  <button data-cy="item-3"></button> <!-- 分组: [data-cy^='item-'] -->
</body>

UI 中显示的元素​

[data-cy^='item-'] (3 个实例)

分组容器内的所有元素​

配置​

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": "#calendar button"
      }
    ]
  }
}

HTML​

<body>
  <div id="calendar">
    <button id="jan"></button>
    <button id="feb"></button>
    <button id="mar"></button>
  </div>
</body>

UI 中显示的元素​

#calendar button (3 个实例)

分组带标签的表单控件​

配置​

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": "input[name='animal'], label:has(input[name='animal'])",
        "name": "动物选项"
      }
    ]
  }
}

HTML​

<body>
  <label>
    <input id="bear" name="animal"></input>
  </label>
  <label>
    <input id="lion" name="animal"></input>
  </label>
</body>

UI 中显示的元素​

动物选项 (4 个实例)

分组动态元素​

配置​

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": "[id^='product']"
      }
    ]
  }
}

HTML​

<body>
  <button id="product125">产品 1</button>
  <button id="product514">产品 2</button>
  <button id="product256">产品 3</button>
</body>

UI 中显示的元素​

[id^='product'] (3 个实例)

为分组指定自定义名称​

有时您可能希望通过公共属性分组元素，但为分组指定更具描述性的名称。在以下示例中，我们将 ID 以 listbox-button- 开头的按钮分组，并将组命名为 添加按钮。

配置​

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": "[id^='listbox-button-']",
        "name": "添加按钮"
      }
    ]
  }
}

HTML​

<body>
  <button id='listbox-button-1'>+</button>
  <button id='listbox-button-2'>+</button>
  <button id='listbox-button-3'>+</button>
  <button id='listbox-button-4'>+</button>
</body>

UI 中显示的元素​

添加按钮 (4 个实例)

目录