Cypress如何实现无唯一选择器复选框的勾选操作

针对复选框无独立唯一选择器、仅和其他复选框共用通用类名的场景，可以按稳定性从高到低选以下方案实现勾选：

• 优先通过关联的label文本定位（稳定性最高）
  绝大多数业务场景下的复选框都会绑定对应描述文本的label标签，不需要死磕复选框本身的属性，直接通过文本反查对应控件即可，兼容label嵌套input、label通过for属性关联input两种常见结构：

  // 场景1：label直接嵌套input的结构：<label><input type="checkbox" class="shared-class"/> 同意隐私协议</label>
  cy.contains('label', '同意隐私协议')
    .find('input[type="checkbox"]')
    .check()
  
  // 场景2：label和input平级、通过for/id关联的结构：<label for="privacy">同意隐私协议</label><input id="privacy" type="checkbox" class="shared-class"/>
  cy.contains('label', '同意隐私协议')
    .invoke('attr', 'for')
    .then(inputId => {
      cy.get(`input#${inputId}`).check()
    })
  

  如果不需要精确匹配文本，直接把contains的第二个参数换成正则即可，比如匹配所有带「订阅」关键词的复选框：cy.contains('label', /订阅/)

• 通过父级唯一容器缩小选择范围
  如果同一页面不同区域都存在同个类名的复选框，可以先定位到目标复选框所在的、有唯一标识的父容器，再在容器范围内筛选目标元素，避免和其他区域的同类型控件冲突：

  // 先定位到唯一标识为notification-setting的通知设置区块，再找区块内的复选框
  cy.get('[data-testid="notification-setting"]')
    .find('.shared-checkbox-class')
    .eq(0) // 选择区块内第一个复选框
    .check()
  

• 通过元素属性、相邻元素特征组合定位
  共用类名的复选框通常会有不同的内置属性（比如value、name、data-*自定义属性），或者相邻元素有唯一标识，可以组合选择器匹配：

  // 匹配value为sms_notice的复选框
  cy.get('.shared-checkbox-class[value="sms_notice"]').check()
  
  // 匹配相邻元素是「短信通知」文本节点的复选框
  cy.contains('span', '短信通知').prev('.shared-checkbox-class').check()
  

• 按索引定位（仅适合DOM结构完全固定的场景，稳定性最低）
  当确定目标复选框的位置不会随页面迭代变动时，可以直接通过下标选择对应元素：

  // 选择页面上第2个使用共用类名的复选框，eq下标从0开始计数
  cy.get('.shared-checkbox-class').eq(1).check()
  

注意：不要使用固定坐标点击的方式勾选复选框，不同设备分辨率、页面渲染状态、窗口尺寸下坐标会出现偏移，非常容易出现执行失败的问题。

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