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

allowedInteractionCommands

UI 覆盖率默认追踪所有交互命令以生成全面的覆盖率报告。allowedInteractionCommands 配置允许您通过基于 CSS 选择器定义规则，来限制为特定元素追踪哪些交互命令。

这对于过滤无关交互或针对不同类型元素聚焦特定交互模式的覆盖率追踪特别有用。

为什么使用 allowedInteractionCommands？​

  • 聚焦追踪：将覆盖率追踪限制为特定元素或组件相关的交互类型，减少报告中的干扰
  • 组件特定规则：基于元素类型或组件类别应用不同的交互追踪规则。例如，复杂数据可视化组件可能需要特定交互类型，而这些交互在常规交互元素中并不需要

语法​

{
  "uiCoverage": {
    "allowedInteractionCommands": [
      {
        "selector": string,
        "commands": [string]
      }
    ]
  }
}

选项​

allowedInteractionCommands 属性接受一个对象数组，每个对象定义一条规则，用于限制匹配特定选择器的元素的交互命令。

选项必填默认值描述
selector必填用于识别元素的 CSS 选择器。支持标准 CSS 选择器语法，包括 ID、类、属性和组合器
commands必填应作为交互追踪的命令名称（字符串）数组，针对匹配选择器的元素。对于这些元素，所有其他交互命令将被忽略

示例​

限制按钮交互仅为点击​

配置​

{
  "uiCoverage": {
    "allowedInteractionCommands": [
      {
        "selector": "button, [role='button']",
        "commands": ["click", "realClick"]
      }
    ]
  }
}

测试中使用​

// 对于按钮只追踪 click 和 realClick
cy.get('[data-cy="submit-button"]').click() // ✓ 追踪
cy.get('[data-cy="submit-button"]').realClick() // ✓ 追踪
cy.get('[data-cy="submit-button"]').hover() // ✗ 不追踪
cy.get('[data-cy="submit-button"]').focus() // ✗ 不追踪

表单元素的不同规则​

配置​

{
  "uiCoverage": {
    "allowedInteractionCommands": [
      {
        "selector": "input[type='text'], textarea",
        "commands": ["type", "clear", "realType"]
      },
      {
        "selector": "select",
        "commands": ["select", "click"]
      },
      {
        "selector": "input[type='checkbox'], input[type='radio']",
        "commands": ["check", "uncheck", "click"]
      }
    ]
  }
}

测试中使用​

// 文本输入框：只追踪 type、clear 和 realType
cy.get('[data-cy="username"]').type('john_doe') // ✓ 追踪
cy.get('[data-cy="username"]').clear() // ✓ 追踪
cy.get('[data-cy="username"]').focus() // ✗ 不追踪

// 选择框：只追踪 select 和 click
cy.get('[data-cy="country"]').select('US') // ✓ 追踪
cy.get('[data-cy="country"]').click() // ✓ 追踪
cy.get('[data-cy="country"]').hover() // ✗ 不追踪

// 复选框/单选按钮：追踪 check、uncheck 和 click
cy.get('[data-cy="agree-terms"]').check() // ✓ 追踪
cy.get('[data-cy="agree-terms"]').click() // ✓ 追踪

排除移动组件的悬停交互​

配置​

{
  "uiCoverage": {
    "allowedInteractionCommands": [
      {
        "selector": "[data-mobile='true']",
        "commands": ["click", "tap", "swipe", "type"]
      }
    ]
  }
}

测试中使用​

// 移动组件：排除 hover 交互
cy.get('[data-mobile="true"][data-cy="menu-item"]').click() // ✓ 追踪
cy.get('[data-mobile="true"][data-cy="menu-item"]').tap() // ✓ 追踪
cy.get('[data-mobile="true"][data-cy="menu-item"]').hover() // ✗ 不追踪

允许断言作为交互​

请注意，由于 allowedInteractionCommands 会替换允许的交互，如果您添加 assert 作为交互，请记得在列表中也添加其他可接受的交互。

配置​

{
  "uiCoverage": {
    "additionalInteractionCommands": [
      {
        "selector": "button[data-no-explicit-interaction='true']",
        "commands": ["assert"]
      }
    ]
  }
}

测试中使用​

// 对匹配元素的任何断言都会被追踪
cy.get('button[data-no-explicit-interaction="true"]').should('exist) // ✓ 追踪
cy.get('button[data-no-explicit-interaction="true"]').should('be.visible) // ✓ 追踪
cy.get('button[data-no-explicit-interaction="true"]').click() // ✗ 不追踪

注意事项​

  • 不匹配任何选择器的元素将追踪所有交互命令（默认行为）
  • 如果元素匹配多个选择器，则允许所有匹配规则的命令。建议对这些选择器使用高度特异性
  • 命令名称区分大小写，必须与测试代码中完全一致
  • 此配置与 additionalInteractionCommands 分开工作。自定义命令不需要在此处声明前全局定义为 additionalInteractionCommands

目录