Cypress多选列表框选择值后断言失败的问题

问题根源 #

多选<select>元素的value属性返回的是数组类型，Cypress报错日志里的[ '0: 'phChecking'' ]是日志的格式化显示形式，并非实际的DOM值，实际返回的数组是['phChecking']。你之前的错误是误将日志格式的字符串当作了实际断言值。

正确实现方案 #

1. 先验证选项存在，再选中并断言值 #

// 先确认目标选项存在
cy.get('select#account option')
  .contains('phChecking')
  .should('exist');

// 选中选项并验证选中状态
cy.get('select#account')
  .select('phChecking')
  .should('have.value', ['phChecking']);

2. 简洁链式写法 #

cy.get('select#account')
  .should('have.option', 'phChecking') // 验证选项存在
  .select('phChecking')
  .should('have.value', ['phChecking']);

3. 直接验证选中的选项文本（更直观） #

如果不需要断言value属性，也可以直接检查选中选项的文本：

cy.get('select#account')
  .select('phChecking')
  .find('option:selected')
  .should('have.text', 'phChecking');

4. 多选项选中的验证 #

如果需要选中多个选项并验证，断言数组包含对应值即可：

cy.get('select#account')
  .select(['phChecking', 'phSavings'])
  .should('have.value', ['phChecking', 'phSavings']);

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