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

elements

UI 覆盖率提供了基于 DOM 结构自动识别元素的逻辑。但在复杂应用中，元素可能缺乏稳定标识符或具有动态变化的属性，导致识别错误。elements 配置允许您指定选择器来唯一标识元素，确保跨快照的一致性并简化覆盖率报告。

当每个快照中只有一个元素匹配时，elements 配置将作为该元素的标识。如果同一快照中有多个匹配项，则忽略此配置并使用默认的识别策略。

为何使用 elements 配置？​

  • 处理动态属性：确保即使属性变化，元素也能在快照间被一致识别
  • 确保唯一标识：对缺乏唯一属性或具有动态值的元素使用自定义选择器，避免错误分类
  • 简化调试：为元素分配人类可读的名称，使报告更易理解且便于调试

语法​

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

选项​

对于 UI 覆盖率考虑的每个元素，将使用第一个适用的规则（由与 selector 属性的匹配确定）进行识别。不匹配任何规则的元素将由默认的 UI 覆盖率元素识别规则进行识别。

如果同一快照中的多个元素满足相同规则，则该规则无法唯一标识这些元素。此时将绕过该规则，应用后续规则或默认的元素识别逻辑。

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

示例​

跨快照通过动态选择器识别元素​

配置​

{
  "uiCoverage": {
    "elements": [
      {
        "selector": "#my-form [id^='dropdown']"
      }
    ]
  }
}

HTML​

<!-- 快照 1 -->
<body>
  <form id="my-form">
    <input id="dropdown-142"></input>
  </form>
</body>

<!-- 快照 2 -->
<body>
  <form id="my-form">
    <input id="dropdown-980"></input>
  </form>
</body>

UI 覆盖率中显示的元素​

#my-form [id^="dropdown"]

使用人类可读名称识别元素​

配置​

{
  "uiCoverage": {
    "elements": [
      {
        "selector": "#ui-popover-button",
        "name": "帮助弹窗按钮"
      }
    ]
  }
}

HTML​

<body>
  <button id="ui-popover-button">帮助</button>
</body>

UI 覆盖率中显示的元素​

帮助弹窗按钮

目录