使用Cypress自动化工具处理动态ID时的选项选择问题

问题说明 #

使用Cypress自动化测试时，需勾选复选框，但因该元素ID为动态生成，通过ID定位会失败。

相关截图 #

• DOM结构：
  
• 错误信息：
  

可行定位方案 #

放弃依赖动态ID，改用以下稳定方式定位：

• 通过name属性定位
  若元素有固定name属性，直接使用：

cy.get('input[name="目标复选框name值"]').check()

• CSS选择器匹配ID前缀/后缀
  如果ID存在固定前缀（如checkbox-开头），用前缀匹配：

cy.get('input[id^="checkbox-"]').check()

若为固定后缀，用后缀匹配：

cy.get('input[id$="-固定后缀"]').check()

• 结合标签文本定位
  复选框旁有固定文本标签时，通过文本关联定位：

cy.contains('label', '复选框对应文本').find('input').check()

• 自定义data-testid属性（推荐）
  若可协调开发添加固定测试属性：

<input type="checkbox" data-testid="固定测试ID" />

Cypress中直接定位：

cy.get('[data-testid="固定测试ID"]').check()

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