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

解决覆盖率缺口

使用 Cypress UI Coverage 识别测试覆盖率缺口后，下一步是解决这些缺口以确保应用程序得到全面测试。本指南概述了提高覆盖率并有效填补已识别缺口的最佳实践和策略。

优先级排序​

并非所有覆盖率缺口都同等重要。使用 UI Coverage 报告中的信息，根据以下因素确定测试工作的优先级：

  • 关键视图：重点关注代表高优先级用户流程的视图或组件，例如结账页面、登录界面或提交表单。
  • 未测试链接：解决当前测试套件未访问的页面测试问题。在访问这些页面之前，您无法获取其中未测试元素的洞察。

通过根据应用程序上下文和业务影响确定优先级，您可以首先解决最重要的缺口。

提升测试覆盖率​

确定优先级区域后，创建或更新测试以填补这些缺口。

生成针对性测试 ✨​

UI Coverage 提供由 AI 驱动的测试生成功能，帮助您快速为 UI Coverage 报告中检测到的未测试元素添加测试，同时遵循您现有的实践和约定。

只需三个步骤：

  1. 在 UI Coverage 报告中选择应用程序任何状态下的交互元素
  2. 点击“生成测试代码”
  3. 从已渲染该元素的规范列表中选择添加测试的位置
Cypress Cloud 截图，裁剪显示点击 '/commands/cookies' 链接的 'Generate Test' 按钮后生成的测试。

Cypress 将生成一个新测试，包括到达 UI 中元素所需的所有设置步骤，并根据元素类型和上下文执行适当的交互。

生成的代码将使用您现有的导航和与应用程序交互的模式，包括用于定位元素或设置状态的自定义命令，并建议在操作完成后应编写的后续断言。

此测试可以直接复制到建议位置的规范文件中，然后您可以继续在本地编写测试。

编写针对性测试​

专注于创建与覆盖率报告中识别的特定未测试元素或页面交互的测试。例如：

describe('Dashboard', () => {
  it('Submits form on landing page', () => {
    cy.visit('/request-trial')

    // 与之前未测试的元素交互
    cy.get('[data-cy="email"]').type('test@email.com')
    cy.contain('Request Trial').click()
    // UI Coverage 现在将显示感谢页面的覆盖率
    cy.url().should('include', '/thank-you')
  })
})

覆盖未测试链接​

使用 UI Coverage 报告的未测试链接部分识别测试未访问的页面。在测试中添加导航步骤以包含这些页面：

describe('Cover Untested Links', () => {
  it('Visits untested pages', () => {
    const untestedLinks = ['/about-us', '/contact', '/pricing']

    untestedLinks.forEach((link) => {
      cy.visit(link)
      // 执行基本检查以确保页面正确加载
      cy.get('h1').should('exist')
      // UI Coverage 现在将显示这些页面的覆盖率
    })
  })
})

优化测试​

确保元素可见性​

某些缺口是由于元素在测试期间隐藏或未渲染导致的。更新测试以显示这些元素：

cy.get('[data-cy="dropdown-toggle"]').click() // 显示隐藏元素
cy.get('[data-cy="dropdown-item"]').should('be.visible')
cy.get('[data-cy="dropdown-item"]').click()

处理动态内容​

如果覆盖率缺口是由动态或条件渲染引起的，确保测试考虑各种应用程序状态：

// 登录以渲染仅在登录后显示的元素
cy.get('[data-cy="login-button"]').click()
cy.get('[data-cy="user-profile"]')

优化配置​

为了最大化 UI Coverage 的效果，考虑优化配置：

  • 元素过滤器：从覆盖率报告中排除不相关的元素（例如占位符、广告）。
  • 重要属性：定义准确识别元素的自定义属性。
  • 属性过滤器：移除自动生成的属性以避免冗余元素识别。

参考配置指南了解如何自定义 UI Coverage 以满足这些常见需求：

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

迭代与监控​

审查覆盖率报告​

更新测试后，再次将其记录到 Cypress Cloud 并审查新的覆盖率报告。验证：

  • 未测试元素和链接已解决。
  • 整体覆盖率得分有所提高。

自动化覆盖率执行​

使用结果 API将覆盖率检查集成到 CI/CD 流水线中。设置覆盖率得分的阈值以强制执行质量标准。这确保您的应用程序长期保持高测试覆盖率。

与团队协作​

提高测试覆盖率通常需要团队协作。与团队分享 UI Coverage 报告的洞察以：

  • 共同确定测试工作的优先级。
  • 对齐需要关注的关键区域。
  • 分配编写或更新测试的任务。

后续步骤​

您还可以利用 UI Coverage 减少测试重复以进一步优化测试套件。学习如何使用 UI Coverage 减少测试重复以简化测试流程。

目录