Cypress技术问题：如何根据选中值获取select元素？

核心思路 #

Cypress没有内置的hasValue方法，但可以通过DOM元素原生属性或自定义命令实现需求，区分两种常见场景：按选中的文本内容定位、按选中的索引/option的value属性定位。

1. 直接实现（无需自定义命令） #

场景1：筛选选中文本为指定内容的select

select元素的选中项文本可通过element.options[element.selectedIndex].text获取，用filter方法筛选：

// 找到所有当前选中文本为"In Process"的select
cy.get('select').filter((index, element) => {
  return element.options[element.selectedIndex].text.trim() === 'In Process'
})

如果是验证单个select的选中值，也可以直接断言：

// 验证某个select的选中文本是否为"In Process"
cy.get('select').find('option:selected').should('have.text', 'In Process')

场景2：筛选选中索引为指定值的select（索引从0开始）

通过selectedIndex属性判断：

// 找到所有当前选中索引为3的select
cy.get('select').filter((index, element) => element.selectedIndex === 3)

场景3：筛选选中option的value属性为指定值的select

select元素的value属性直接对应选中option的value，可直接比较：

// 找到所有当前选中option的value为"3"的select
cy.get('select').filter((index, element) => element.value === '3')

2. 自定义hasValue命令（贴近你的期望写法） #

如果想让语法更简洁，在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('hasValue', { prevSubject: true }, (subject, targetValue) => {
  return cy.wrap(subject).filter((index, element) => {
    // 处理索引匹配
    if (typeof targetValue === 'number') {
      return element.selectedIndex === targetValue
    }
    // 处理文本或value属性匹配
    const selectedText = element.options[element.selectedIndex].text.trim()
    const selectedValue = element.value
    return selectedText === targetValue || selectedValue === targetValue
  })
})

之后就可以像你期望的那样使用：

// 匹配选中文本为"In Process"的select
cy.get('select').hasValue('In Process')
// 匹配选中索引为3的select
cy.get('select').hasValue(3)
// 匹配选中option的value为"3"的select
cy.get('select').hasValue('3')

为什么contains不适用？ #

contains会匹配元素所有可见文本内容，而select的文本是所有option的文本集合，所以会返回所有包含目标文本的select（不管该文本是不是选中状态），无法精准定位到当前选中值符合要求的元素。

表格场景的延伸用法 #

如果是表格中每行的select，结合行的标识筛选：

// 找到包含"用户ID: 123"的行，且该行的select选中值为"Waiting for Review"
cy.get('table tr')
  .contains('用户ID: 123')
  .find('select')
  .filter((_, el) => el.options[el.selectedIndex].text === 'Waiting for Review')

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