Cypress如何通过部分文本匹配选择动态下拉列表选项

Cypress 原生select()API 默认对选项文本、value 属性做精确匹配，直接传入部分文本无法命中目标项，不过完全可以通过内置方法实现模糊匹配，适配「固定字段+动态后缀」的选项场景。

原生<select>标签下拉实现 #

核心逻辑是先通过部分文本定位到目标 option，拿到它的完整标识后再触发选中，两种常用写法：

写法1：提取完整文本后调用select #

cy.get('#RecieptName')
  .find('option')
  .contains('RecieptName:') // 模糊匹配文本包含固定前缀的选项
  .invoke('text')
  .then(optionFullText => {
    cy.get('#RecieptName').select(optionFullText)
  })

写法2：直接修改option选中状态 #

cy.get('#RecieptName')
  .find('option')
  .contains('RecieptName:')
  .then($targetOption => {
    $targetOption.prop('selected', true)
    cy.get('#RecieptName').trigger('change') // 手动触发值变更事件，保证前端框架能同步选中状态
  })

自定义组件下拉实现 #

如果是组件库实现的非原生下拉（比如 AntD、ElementUI 的下拉组件），不需要调用select()方法，直接模拟用户点击操作即可：

cy.get('#RecieptName').click() // 点击展开下拉面板
cy.get('[role="option"]').contains('RecieptName:').click() // 模糊匹配目标选项后点击选中

避坑提示 #

• 不要直接给select()传入部分文本，它没有内置模糊匹配逻辑，传部分值会直接抛出「找不到对应选项」的错误
• 如果多个选项包含相同的RecieptName:前缀，可以给contains()传入正则做更精准的匹配，避免选错

下拉选项示例截图

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