Skip to main content
Cypress无障碍测试高级解决方案

对比报告

不同运行周期的无障碍测试报告可以在Cypress Cloud的分支评审区域进行对比。这使您能立即发现是否引入了新问题,并深入查看仅显示新问题的完整页面HTML和CSS快照。

以下视频展示了在Pull Request中使用分支评审的示例:

手动对比两份无障碍测试报告通常具有挑战性:

  • 每份报告可能针对单个Cypress运行测试了数千个应用快照
  • 每个快照测试80+条无障碍规则
  • 测试了多个不同页面或组件,且可能存在变更
  • 元素在不同运行周期中可能被不同方式标识

Cypress无障碍测试的分支评审功能旨在帮助您轻松浏览这组嵌套变更并发现重要内容。您可以查看特定规则下新增的无障碍违规情况,并深入查看发生这些变更的具体视图。

使用场景

对比不同运行周期的结果在多种场景下都很有用。

主要使用场景:

  • 合并前检查:了解UI代码变更是否引入了净新增问题
  • 监控变更:对比夜间监控运行结果,追踪由应用底层变更导致的新问题
  • 检测内容问题:有时内容编辑者会引入与代码变更无关的无障碍问题。通过可视化、上下文中的示例问题,帮助您快速判断是近期代码变更问题还是内容创作问题
  • 审查AI生成的代码变更:AI生成和/或审查前端代码的增多,增加了无障碍问题进入生产环境的风险。在审查pull request时查看无障碍问题的增减情况,有助于理解变更影响
  • 追踪问题引入:通过每个运行周期的下拉菜单,可以快速对比不同A/B运行,找到引入问题的具体提交
  • 展示问题解决情况:确认改进效果,并与团队分享概要以加速代码变更审查

报告内容

Cypress无障碍分支评审显示两个主要部分 - 新增失败元素和已解决元素

理解运行对比报告的关键在于:变更运行是所有显示数据的焦点,而基准运行仅作为对比参考点。因此您看到的任何元素或深入查看的详细信息,都只来自变更运行。

分支评审报告分为两部分:

  • 新增失败元素:变更运行中存在但在基准运行中未发现的失败元素计数。这些按视图列出,针对每个检测到新失败的无障碍规则
  • 已解决元素:基准运行中检测到但变更运行中不再存在的失败元素计数。这些也按视图列出,作为各无障碍规则下的改进项

如果变更运行与Pull Request关联,且运行了与基准运行相同的整体测试套件,则报告中的变更可能由pull request中的代码变更引起。

如何对比运行

第一步是进入Cypress Cloud的分支评审区域,这里可以对比不同分支,或同一分支的不同运行(如有需要)。您可以通过点击运行关联的分支名称或其他多种方式访问该区域。了解更多对比运行的方法

各部分详情

新增失败元素

新增失败元素指在基准运行中完全不存在,或存在但通过无障碍检查的元素。

Cypress无障碍分支评审显示两个主要部分 - 新增失败元素和已��解决元素

存在新增失败元素的规则会在此显示。有两种方式浏览此列表:可以打开每个规则并从检测到新失败元素的视图列表中选择,或点击"查看全部"链接查看包含所有规则和视图中净新增失败的完整报告。

两种方式都会进入详细报告(针对单个视图或所有视图)。该报告与主Cypress无障碍报告工作方式相同,为每个违规提供完整页面快照示例。唯一区别是两份报告中相同的问题已被移除,仅显示新增内容(针对所选特定视图或所有视图)。

Cypress无障碍分支评审显示演示联系表单的详细对比。联系表单中的'name'字段被红色高亮,因为它缺少标签

单视图对比 vs 全运行对比

每个规则首先显示"所有视图"对比项,然后在下方列出单个视图。根据您需要的详细程度,可以深入特定页面或组件查看无障碍变更,或仅查看合并报告。

对于单个规则的合并"所有视图"报告特别有用,如果违规倾向于在不同页面间移动。例如,如果存在无障碍问题的弹窗在每次运行中随机出现在不同页面,它可能在变更运行的某个视图中显示为"新增",而在基准运行的另一个视图中显示为"已解决",但实际上您的无障碍分数相同且问题相同。"所有视图"让您能根据需要避开此类干扰。

已解决元素

已解决元素指在基准运行中存在无障碍规则失败,但在变更运行中未发现匹配失败的元素。

新运行中已解决元素的无障碍规则列表

已解决元素会为每个规则和视图计算,但不单独显示。这是因为就变更报告而言,这些失败已不存在,无法保证元素仍存在于"新"报告中。

如果您需要查看不再检测到失败的具体元素,请联系Cypress代表进一步讨论。目前分支评审的重点是新问题——我们避免在同一报告中混合新旧数据以最小化混淆可能。

如果没有变更会怎样?

如果没有变更,无障碍分支评审报告仍会显示所有部分,并说明变更运行中没有新增或已解决元素:

新增和已解决元素部分各显示一条消息,说明没有发现

这意味着报告完全相同,变更运行对无障碍性没有影响。

确保良好对比

最容易对比的主体是通过运行、运行相似测试相似内容。这意味着每次运行访问大致相同的页面并完成相似的工作流。这种情况下,结果的任何差异都可能是新运行中变更的结果。例如,当对比pull request分支与主分支时通常如此(假设两个分支运行相同测试)。

也就是说,只要您注意两个运行间所有潜在差异来源,对比不同时间点、不同测试结果集的运行仍是可能且有效的。您可以在探索结果时自行评估这些差异。

要查看整个测试套件的统一变更,您需要将每次报告的所有测试分组到单个Cypress运行下。分支评审最佳实践文档中有更多相关信息。

稳定对比

在大多数项目中,无障碍测试报告对比开箱即用效果良好。但某些情况下,配置对于处理页面URL或元素定位器中的动态值很有用。您可能还需要采取措施提高被测元素的一致性。

稳定视图

带有动态slug的URL在某些情况下可能显示为"新"页面。可以通过视图配置调整此行为,通过通配URL部分确保跨运行页面名称匹配。

Cypress对某些已知模式自动执行此过程。例如,默认行为是将https://example.com/products/123这样的URL跟踪为https://example.com/products/*,使底层产品页面作为一个视图分组,然后在运行间以稳定方式识别该视图。

如果视图显示为"新增",会以绿色加号图标标识,并有工具提示说明该视图在变更运行中出现但基准运行中没有,如下所示:

Cypress无障碍分支评审显示报告中几个新增视图,每个旁边有加号,工具提示说明该视图在一个报告中看到而另一个没有

同样,如果规则在变更运行中不再捕获的视图上显示已解决元素,这会在已解决元素部分标识:

Cypress无障碍分支评审显示报告中几个新增视图,每个旁边有加号,工具提示说明该视图在一个报告中看到而另一个没有

这些视图变更可能是因为应用中实际添加了新页面,或测试到达了之前未到达的新页面。当您看到意外的添加和移除URL时,会清楚是否需要配置以提高跨运行视图稳定性。

稳定元素

Cypress存储代表报告中每个失败元素的字符串,使用标准化的元素识别流程确定。这与标准Axe-Core®元素识别算法不同,支持对比应用不同构建版本的运行,并利用DOM中已有的测试相关属性。

在可能的情况下,我们优先使用已知稳定定位器如data-cydata-testid。某些情况下识别字符串包含每次应用构建时变化的动态值,在差异中引入干扰。元素识别行为灵活可配置,可满足您的需求并完全避免使用动态值作为标识符。

例如,如果元素的默认定位器在构建A中包含.css-21kj23类,在构建B中包含稍有不同的.css-2309kj类,它会显示为存在"已解决元素"和"新违规"。

此行为高度可定制,您可以选择不依赖不重要的值,也可以选择对元素识别_确实_重要的特定属性,根据自身目标获得合理的去重和匹配行为。

了解更多关于attributeFilterssignificantAttributes配置的信息,或联系我们获取任何调整行为的帮助。

稳定的底层报告区域

您的测试可能从未用于持续无障碍测试,虽然大多数代码库产生稳定结果,但某些项目由于测试期间特定过程的性能,运行间存在固有差异。

例如,有时测试可能在页面上停留足够长时间以在表单提交后看到确认消息,除非服务器响应慢,测试可能在未渲染该状态时完成。

根据问题性质有不同解决方案。如果希望确保Cypress无障碍测试始终捕获该状态,可以在测试中添加关于该状态的断言。另一方面,如果完全不想考虑该状态,可以使用elementFilters配置忽略它。两种方法都能带来更稳定的分支对比。