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

减少测试重复

高效的测试套件不仅需要最大化覆盖率，还应避免冗余测试拖慢开发和CI流程。Cypress UI覆盖率可帮助您洞察被多次测试的元素区域，从而优化测试策略并减少重复。本指南将介绍如何识别和处理测试重复，实现精简高效的测试。

识别与整合重复测试​

Cypress Cloud中的UI覆盖率报告会高亮显示在运行中被多次测试的元素。识别重复的步骤如下：

  1. 在测试运行的UI覆盖率标签页中，导航至已测试元素部分
  2. 定位具有大量交互的元素
  3. 查看视图中的快照，识别与该元素交互的重复测试
Cypress Cloud截图显示Cypress应用的欢迎界面，其中Continue按钮被高亮并标注了它在快照中出现的次数

常见的重复迹象​

  • 重复交互：在多个快照或不同测试中被交互的元素
  • 测试重叠：多个测试覆盖相同工作流或用户旅程
  • 过多准备步骤：跨测试中对相同元素重复执行准备步骤

示例：欢迎界面重复​

下例显示Cypress应用启动器中，欢迎界面的Continue按钮在327个快照中被交互了184次。这表明许多测试都会与该元素交互。但查看部分测试回放快照后发现，大多数测试并不关注欢迎界面的行为——我们只是通过它进入其他测试。这提示了减少测试重复的机会。

Cypress Cloud截图显示一个具有大量快照和交互次数的按钮

现在我们可以专注于整合测试并优化测试套件，避免不必要的重复。

// 此示例为演示目的进行了简化
// 实际场景中，您需要修改检查属性
// 来控制是否显示首次用户的欢迎界面
Cypress.Commands.add('skipWelcome', () => {
  cy.setCookie('welcome', 'dismissed')
})

it('显示欢迎页面', () => {
  cy.visit('/')
  cy.contains('Welcome')
  cy.get('[data-cy="continue"]').click()
  cy.contains('Projects')
})

it('显示项目页面', () => {
  cy.skipWelcome()
  cy.visit('/')
  cy.contains('Projects')
})

更新测试并记录新运行后，我们可以查看已测试元素部分观察改动效果。Continue按钮现在出现的快照和交互次数减少，表明我们成功降低了重复。

Cypress Cloud截图显示减少测试重复后元素的快照和交互情况

监控与预防重复​

记录测试策略​

维护清晰的测试策略文档，明确说明：

  • 每个测试套件的范围和目的
  • 各测试覆盖的工作流和组件
  • 避免新测试重叠的指导原则

目录