如何在Cypress 12中用includes/equals定位带尾号的下拉选项

你可以用提取的卡号后四位变量构建选择器，以下是几种可行的实现方式：

• CSS属性包含匹配（精准匹配格式）
  因为你的data-cy格式是前缀-后四位，直接用*=匹配包含-${cardNumberShort}的属性值，能避免误匹配其他包含这四位数字的项：

  const targetOption = document.querySelector(`[data-cy*="-${cardNumberShort}"]`);
  

• CSS属性后缀匹配（更严格）
  如果要确保data-cy的后缀部分是-${cardNumberShort}，用$=后缀选择器精准度更高：

  const targetOption = document.querySelector(`[data-cy$="-${cardNumberShort}"]`);
  

• Cypress测试环境下的写法
  既然用到了data-cy，大概率是在Cypress中做自动化测试，直接拼接变量到选择器即可：

  cy.get(`[data-cy$="-${cardNumberShort}"]`).click();
  

可能的失败原因排查 #

1. 拼接时遗漏连字符-：比如直接写[data-cy*="${cardNumberShort}"]，会匹配到任意包含这四位数字的元素，导致定位错误
2. 未使用模板字符串：如果用单引号包裹选择器，变量不会被解析，要确保用反引号`包裹选择器
3. 下拉菜单未加载完成：如果是动态渲染的下拉，需要等待元素可见后再定位，比如Cypress中可以追加.should('be.visible')

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