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

减少干扰

一份清晰聚焦的UI覆盖率报告能帮助您制定更明智的测试策略。Cypress UI Coverage通过元素分组、特殊属性处理和URL模式视图分组等功能，有效减少报告中的干扰信息。本指南将介绍如何创建简洁高效的覆盖率报告。

按URL模式分组视图​

Cypress会自动将具有相似URL模式的视图（例如包含用户ID的URL）分组，以提供更统一的覆盖率指标。

通过配置相似URL模式的视图，您可以合并已知相关页面的覆盖率数据。要添加或修改项目配置，请前往项目设置的应用质量选项卡，添加viewGroups配置。

示例：用户资料分组​

https://cypress.io/users/alice
https://cypress.io/users/alice?foo=bar
https://cypress.io/users/bob
https://cypress.io/users/bob#baz
{
  "views": [
    {
      "pattern": "https://cypress.io/users/*"
    }
  ]
}

更多配置选项请参考视图配置文档。

分组相似元素​

通过将功能相同的元素归类，可以减少重复条目，提升报告清晰度。这对按钮、链接或表单字段等跨视图出现的元素特别有用。分组后您可以关注某类元素的整体覆盖率，而非单个实例。

示例：动态ID分组​

下例中，由于动态生成的ID，UI覆盖率报告会显示多个实际功能相同的按钮。通过分组配置可以合并这些条目。

<nav>
  <button id="nav-button819230">Page 1</button>
  <button id="nav-button819231">Page 2</button>
  <button id="nav-button819232">Page 3</button>
</nav>

在项目设置的应用质量选项卡中，于uiCoverage下添加elementGroups配置：

{
  "uiCoverage": {
    "elementGroups": [
      {
        "selector": "nav [id^=nav-button]"
      }
    ]
  }
}

配置后，报告将显示单个合并条目而非3个独立按钮：

nav [id^=nav-button] (3个实例)

完整配置选项请参阅元素分组文档。

配置属性处理​

通过属性配置可以指定Cypress应关注哪些对项目有实际意义的元素属性。

定义关键属性​

指定Cypress识别元素时应优先考虑的属性。在项目设置的应用质量选项卡中，于uiCoverage下添加significantAttributes配置：

{
  "uiCoverage": {
    "significantAttributes": ["data-custom-id"]
  }
}

详情请参考关键属性文档。

使用属性过滤器​

排除自动生成或无意义的干扰属性。在uiCoverage下添加attributeFilters配置：

{
  "uiCoverage": {
    "attributeFilters": [
      {
        "attribute": "id",
        "value": "sizzle.*",
        "include": false
      },
      {
        "attribute": "ng-.*",
        "value": ".*",
        "include": false
      }
    ]
  }
}

完整配置说明请查看属性过滤器文档。

目录