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

elementFilters

elementFilters 属性允许您指定应从报告中排除的元素选择器。

为什么使用元素过滤器？​

  • 忽略第三方组件：不属于应用程序逻辑的库或小部件可以从报告中排除。
  • 精简报告：通过过滤非必要元素减少干扰，使报告更具可操作性。

语法​

info

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

{
  "elementFilters": [
    {
      "selector": string,
      "include": boolean
    }
  ]
}

选项​

第一个匹配元素选择器的 elementFilters 规则将根据 include 值决定是否包含该元素。未匹配任何规则的元素默认会被包含。

选项必填默认值描述
selector是用于识别元素的CSS选择器。支持标准CSS选择器语法，包括ID、类、属性和组合器。
include否true布尔值，指示匹配的元素是否应包含在报告中。

示例​

排除特定元素​

配置​

{
  "elementFilters": [
    {
      "selector": "#button-2",
      "include": false
    }
  ]
}

HTML​

<body>
  <button id="button-1">包含</button>
  <button id="button-2">排除</button>
</body>

界面显示的元素​

#button-1

排除容器内所有元素​

配置​

{
  "elementFilters": [
    {
      "selector": "footer *",
      "include": false
    }
  ]
}

HTML​

<body>
  <main>
    <button id="start">包含</button>
  </main>
  <footer>
    <a href="#">排除</a>
  </footer>
</body>

界面显示的元素​

#start

仅包含特定容器内的元素​

配置​

{
  "elementFilters": [
    {
      "selector": "#form *",
      "include": true
    },
    {
      "selector": "*",
      "include": false
    }
  ]
}

HTML​

<body>
  <form id="form">
    <input id="name" />
  </form>
  <footer>
    <a href="#">排除</a>
  </footer>
</body>

界面显示的元素​

#name

按属性排除元素​

配置​

{
  "elementFilters": [
    {
      "selector": "[data-role='decorative']",
      "include": false
    }
  ]
}
<body>
  <button data-role="decorative">
    <img src="icon.png" />
  </button>
  <button data-role="primary">
    查看
  </button>
</body>

界面显示的元素​

[data-role="primary"]

按模式排除动态元素​

配置​

{
  "elementFilters": [
    {
      "selector": "[class^='auth']",
      "include": false
    }
  ]
}

HTML​

<body>
  <button class="cancel">取消</button>
  <button class="auth908283794">登录</button>
</body>

界面显示的元素​

.cancel

排除禁用元素​

UI 覆盖率默认会高亮显示禁用元素，以揭示应用中可能存在的未测试路径（以防这些元素后续变为启用状态）。如果需要，你可以使用 elementFilters 配置将它们从报告中排除。

配置​

{
  "elementFilters": [
    {
      "selector": "[disabled]",
      "include": false
    }
  ]
}

HTML​

<body>
  <button data-cy='cancel'>取消</button>
  <button disabled data-cy='submit'>提交</button>
</body>

UI 中显示的元素​

[data-cy='cancel']

目录