Cypress中如何从含相似值的下拉列表精准选择Numeric选项

你当前代码里的cy.contains('[role=option]', 'Numeric')是模糊匹配规则，会选中所有文本里包含“Numeric”的选项（比如“Alpha-Numeric”这类带后缀的选项）。要只选中纯“Numeric”的选项，有几种可靠的解决方法：

方法1：用contains的精确匹配参数 #

Cypress的contains方法支持传入配置项，设置exact: true就能严格匹配文本内容，不会误选包含目标文本的其他选项：

// 打开下拉列表（优化原代码，去掉无效的连续get和硬等待）
cy.get('[role=gridcell]').eq(9).click()
// 等待下拉列表加载完成并可见，替代硬编码的wait(2000)
cy.get('[role=listbox]').should('be.visible')
// 精确匹配纯"Numeric"选项并点击
cy.contains('[role=option]', 'Numeric', { exact: true }).click()

方法2：过滤文本严格相等的元素 #

用filter方法筛选出文本完全等于“Numeric”的选项（注意要移除文本前后的空白字符，避免因格式问题匹配失败）：

cy.get('[role=gridcell]').eq(9).click()
cy.get('[role=listbox]').should('be.visible')
cy.get('[role=option]')
  .filter((_, el) => el.textContent.trim() === 'Numeric')
  .click()

方法3：遍历元素定位精确匹配项 #

如果需要更灵活的判断逻辑，可以遍历所有下拉选项，找到文本严格匹配的元素后点击：

cy.get('[role=gridcell]').eq(9).click()
cy.get('[role=listbox]').should('be.visible')
cy.get('[role=option]').each(($option) => {
  if ($option.text().trim() === 'Numeric') {
    cy.wrap($option).click()
    return false // 找到目标后终止遍历，提升效率
  }
})

原代码的小优化提示 #

• 连续调用cy.get()会丢失前一个命令的上下文，比如cy.get('[role=presentation]') cy.get('[role=row]')这种写法无效，多余的get可以直接删除
• 尽量避免使用wait(2000)这类硬等待，用should('be.visible')这种断言等待更可靠，能自动适配页面加载速度

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