Cypress测试中如何根据标签文本勾选mat-checkbox组件？

完全可以基于mat-checkbox的标签文本实现复选框勾选，不需要硬编码动态ID或固定层级选择器，完全能满足你封装通用步骤、仅传入标签文本即可操作组件的需求。
本次参考的复选框DOM结构：
#

Angular Material的mat-checkbox组件默认会把标签文本存放在内部的.mat-checkbox-label节点下，实现逻辑很简单：先通过文本匹配找到对应标签，向上回溯到mat-checkbox根节点，再触发内部勾选区域的点击事件即可，还能顺便加状态校验避免无效操作。

1. 封装全局可复用命令 #

在Cypress支持文件cypress/support/commands.js中添加自定义命令，全局可用：

Cypress.Commands.add('checkMatCheckboxByLabel', (labelText) => {
  // 精确匹配对应标签文本，向上查找所属的mat-checkbox根节点
  cy.contains('mat-checkbox .mat-checkbox-label', labelText, { exact: true })
    .closest('mat-checkbox')
    // 过滤掉禁用状态的复选框，避免无效点击
    .not('.mat-checkbox-disabled')
    .as('targetCheckbox')
    // 操作前校验当前为未选中状态，防止重复点击
    .should('have.attr', 'aria-checked', 'false')
    .within(() => {
      // 点击组件内置的勾选容器，兼容不同版本Material的事件触发逻辑
      cy.get('.mat-checkbox-inner-container').click()
    })

  // 操作后校验选中状态生效，提升用例稳定性
  cy.get('@targetCheckbox').should('have.attr', 'aria-checked', 'true')
})

2. 用例中直接调用 #

封装完成后，所有操作复选框的场景只需要传入标签文本即可，不需要重复写定位逻辑：

// 勾选"Advanced search"复选框
cy.checkMatCheckboxByLabel('Advanced search')
// 勾选"Basic search"复选框
cy.checkMatCheckboxByLabel('Basic search')

• 如果需要同时支持取消勾选的场景，可以给命令新增一个targetState参数（值为true/false），先读取组件当前aria-checked属性值，和目标状态不一致时再执行点击即可
• 如果项目使用的Angular Material版本较旧，组件内部类名有差异，只需要把.mat-checkbox-inner-container替换为当前版本实际响应点击的勾选区域选择器即可
• 如果需要忽略文本大小写匹配，可以在contains的配置项中添加matchCase: false

内容的提问来源于stack exchange，提问作者user9847788