如何在Cypress中检查select组件当前状态的显示文本

你之前使用的have.text断言失效的核心原因是：该断言会读取select元素下所有option节点的拼接文本，和下拉框当前对外展示的选中值完全无关，自然无法得到预期结果。

网上多数同类方案默认你的下拉框内置了一个值为空、文本为空的占位option（比如<option value="">请选择</option>），和你当前无任何option默认选中的场景不匹配，所以会出现方案无效的情况。

你可以根据自己的实际场景选下面任意一种校验方式：

• 校验下拉框当前显示的选中值为空（最贴合「页面展示为空」的校验需求）

cy.get('#filter-dropdown')
  .find('option:selected')
  .should('have.text', '')

• 校验select元素的绑定值为空（适合Vue/React等框架双向绑定初始值为空的场景，和你给出的代码结构匹配度最高）

cy.get('#filter-dropdown').should('have.value', '')

• 校验无任何选项处于选中状态（最严谨的「无选中值」判断，会直接校验选中索引为-1，即没有option被标记为selected）

cy.get('#filter-dropdown').should(($select) => {
  expect($select[0].selectedIndex).to.equal(-1)
})

补充说明：如果你的下拉框是自定义组件封装的（而非原生select），只需要把选择器替换成你自定义组件显示选中值的对应节点即可，断言逻辑一致。

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