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

元素标识

Cypress Accessibility 通过结合HTML属性、位置和DOM中的其他信号，在不同视图和快照中唯一标识元素。稳定且唯一的标识符对于准确跟踪和去重测试中捕获的各种快照中的元素至关重要。

此过程替换了底层 Axe-Core® 库默认的元素标识机制，后者虽然也使用字符串，但侧重于在特定DOM上下文中捕获元素的唯一标识符。默认行为未考虑以下情况：有时需要将数万次 Axe-Core® 扫描合并为单次运行，或基于应用程序的不同构建版本进行比较。这两种情况都发生在 Cypress Cloud 中，当元素标识过程可由用户控制并能为项目定制时，效果会更好。

标识的重要属性​

Cypress Accessibility 优先考虑以下属性进行元素标识：

  • data-cy
  • data-test
  • data-testid
  • data-test-id
  • data-qa
  • row-id
  • id
  • name

如果您的应用中已存在测试ID或类似属性，Cypress Accessibility 将识别这些属性，并用它们在新位置识别相同元素以改进去重。此行为本身也是可配置的，例如可以避免使用高度动态的测试ID。

配置元素标识​

使用这些配置属性可帮助您调整 Cypress 的去重程度，以匹配您的应用需求。例如，如果组件渲染静态内容，基于组件的测试ID可能是很好的标识符；但如果组件在不同位置渲染不同内容，相同的测试ID将是一个糟糕的标识符——出于可访问性目的，您可能更愿意将这些实例视为唯一。

属性过滤器​

排除无关或动态生成的属性，减少 Cypress Accessibility 报告中的干扰。例如：

{
  "attributeFilters": [
    {
      "attribute": "id",
      "value": ":r.*:",
      "include": false
    }
  ]
}

了解更多关于属性过滤的信息，请参阅属性过滤器指南。

重要属性​

定义自定义重要属性，优先考虑与您应用结构相符的特定选择器。例如：

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

详细说明请参考重要属性指南。

目录