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

significantAttributes

significantAttributes 属性允许您指定哪些属性应被视为UI覆盖率分析的重要属性。

为什么要使用significantAttributes?​

  • 聚焦重要变更: 跟踪与用户交互和功能最相关的属性
  • 减少误报: 避免将非必要属性的变更标记为覆盖率问题
  • 提升报告清晰度: 通过关注关键属性使覆盖率报告更有意义

作用范围​

info

注意: 如果在配置根节点设置significantAttributes，将同时影响Cypress无障碍访问和UI覆盖率报告。如需分别配置，可将此属性嵌套在accessibility或uiCoverage键下。

语法​

{
  "significantAttributes": [
    {
      "selector": string,
      "attributes": string[]
    }
  ]
}

选项​

系统会使用第一个匹配元素选择器规则的significantAttributes来确定哪些属性应被视为重要。默认情况下，不匹配任何规则的属性不被视为重要。

选项必填默认值描述
selector必填用于识别元素的CSS选择器。支持标准CSS选择器语法，包括ID、类、属性和组合器。
attributes必填应被视为覆盖率分析重要属性的属性名称数组。

示例​

为所有元素标记特定重要属性​

配置​

{
  "significantAttributes": [
    {
      "selector": "*",
      "attributes": ["class", "id", "role"]
    }
  ]
}

HTML​

<body>
  <button class="primary" id="submit" role="button" data-testid="submit">
    提交
  </button>
</body>

跟踪的重要属性​

class="primary", id="submit", role="button"

为不同元素标记不同重要属性​

配置​

{
  "significantAttributes": [
    {
      "selector": "input",
      "attributes": ["type", "name", "required"]
    },
    {
      "selector": "button",
      "attributes": ["type", "disabled"]
    }
  ]
}

HTML​

<body>
  <input type="text" name="username" required class="form-control" />
  <button type="submit" disabled class="btn">提交</button>
</body>

跟踪的重要属性​

input: type="text", name="username", required="required"
button: type="submit", disabled="disabled"

使用属性通配符​

配置​

{
  "significantAttributes": [
    {
      "selector": "*",
      "attributes": ["aria-*"]
    }
  ]
}

HTML​

<body>
  <div aria-label="主要内容" aria-hidden="false" class="container">
    内容
  </div>
</body>

跟踪的重要属性​

aria-label="主要内容", aria-hidden="false"