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

识别覆盖率缺口

了解应用程序的测试覆盖率对于确保质量和可靠性至关重要。Cypress的UI覆盖率工具可以洞察应用程序的哪些部分已被测试，并突出显示未测试区域。本指南将帮助您开始使用UI覆盖率工具，有效识别和解决覆盖率缺口。

运行测试​

要识别覆盖率缺口，首先需要运行并将Cypress测试记录到云端。如果您是Cypress的新手，请参考Cypress文档开始编写测试。

示例：基于站点地图的自动化测试​

如果您的项目缺少现有的Cypress测试，一种常见的方法是通过站点地图或目标URL数组来了解测试覆盖率。这些URL可用于执行轻量级交互并捕获测试中的初始缺口。以下是一个使用站点地图自动化此过程的示例：

describe('UI覆盖率扫描', () => {
  it('使用sitemap.xml检查UI覆盖率', () => {
    cy.request('https://<YOUR_WEBSITE>/sitemap.xml').then((response) => {
      const xmlString = response.body
      const parser = new DOMParser()
        (loc) => loc.textContent
    })
    Cypress._.each(URLs, (URL) => {
      cy.visit(URL)
    })
  })
})

查看覆盖率报告​

一旦测试记录到Cypress Cloud，您可以分析覆盖率报告以识别缺口。在Cypress Cloud中点击项目中的运行，访问UI覆盖率报告。该报告提供了应用程序测试覆盖率的可视化表示，突出显示已测试和未测试的元素。

总体分数​

首先要查看的指标是总体覆盖率分数。该分数通过比较已测试元素数量与应用程序中交互元素的总数计算得出。分数越高表示覆盖率越好，分数越低则表示需要额外测试的区域。该分数将显示在运行页面和单个运行中。

Cypress Cloud截图，裁剪显示4个运行的列表，包括运行详情如git提交、提交者、分支和UI覆盖率分数11%

视图​

在运行的UI覆盖率选项卡中，您会找到视图部分。视图代表应用程序的不同页面或组件。列表中的每个视图显示URL或组件路径、快照数量、该视图中未测试和已测试的元素数量以及覆盖率分数。

Cypress Cloud截图，裁剪显示UI覆盖率选项卡中的视图列表，包括左侧导航、视图列表和过滤器

视图详情​

点击视图会显示该视图中已测试和未测试元素的详细分类。您可以使用此信息通过浏览器的开发者工具检查元素的DOM快照，并了解任何覆盖率缺口的上下文。视图包括：

  • 未测试元素：测试运行期间未交互的交互元素列表。
  • 已测试元素：测试运行期间交互过的交互元素列表。
  • DOM快照：测试运行期间视图的全页可检查DOM快照。已测试元素显示为绿色，未测试元素显示为红色。
  • 快照导航：在快照之间导航，查看测试运行期间视图在不同时间点的状态。
  • 快照覆盖率分数：基于已测试元素数量的特定快照覆盖率分数。
  • 测试回放：指向特定快照的测试回放链接。
  • URL和视口大小：视图的元数据。
Cypress Cloud截图，裁剪显示cypress-documentation项目中的单个视图，包括视图的URL、已测试和未测试元素列表以及视图的DOM快照

未测试链接​

在UI覆盖率选项卡中，未测试链接部分列出了测试运行期间未交互的所有链接。这可以帮助您识别应用程序中未被访问和测试的页面。使用此信息优先测试未访问的页面。

Cypress Cloud截图，裁剪显示未测试链接部分，列出了测试运行期间未交互的链接

来源详情​

点击来源链接会将您重定向到来源视图，其中未测试的链接以红色突出显示。

Cypress Cloud截图，显示视图中未测试的链接以红色突出显示

未测试元素​

UI覆盖率选项卡中的未测试元素部分列出了测试运行期间未交互的所有交互元素。这可以帮助您识别视图中未被测试的特定元素。使用此信息优先测试这些元素。

Cypress Cloud截图，裁剪显示未测试元素部分，列出了测试运行期间未交互的元素

视图详情​

点击未测试元素的视图会显示该元素的详细分类，包括元素选择器、交互次数以及无交互的视图。您可以使用此信息通过浏览器的开发者工具检查元素的DOM快照，并了解任何覆盖率缺口的上下文。

Cypress Cloud截图，裁剪显示单个未测试元素，包括元素选择器、交互次数、无交互的视图以及视图的完整DOM快照

配置UI覆盖率​

虽然UI覆盖率设计为开箱即用，但在某些情况下可能需要自定义配置以应对独特的应用程序结构、测试需求或边缘情况。请参考配置指南了解如何自定义UI覆盖率以满足这些常见需求：

  • 过滤：从覆盖率报告中排除特定元素或视图。
  • 分组：将相似元素分组以便分析。
    • 元素：指定选择器以唯一标识元素，即使它们在快照中缺乏稳定的标识符。
    • 元素分组：将相似元素分组以便分析。
    • 视图：根据定义的URL模式将视图分组。
  • 定义属性模式：定义用于通过属性识别和分组元素的模式。
    • 属性过滤器：指定不应用于识别和分组元素的属性及其值的模式。
    • 重要属性：定义选择器，优先于Cypress用于识别和分组的默认属性。

后续步骤​

通过利用这些工具和技术，您可以有效识别测试覆盖率缺口。接下来，阅读我们的解决覆盖率缺口指南，以确保应用程序的健壮性和可靠性。

目录