如何使用Cypress遍历动态下拉菜单选项并解决select操作报错问题

• 你的写法存在两个核心问题：
  1. cy.get('#filter1') 获取到的是<select>元素本身，整个页面只有1个匹配元素，each()遍历的目标根本不是下拉选项，而是单个select元素
  2. 部分版本的Cypress select() 方法传入数值类型的索引时，内部处理会尝试调用字符串的replace方法，数值类型没有这个方法，就会抛出v.replace is not a function的类型错误

首先先获取<select>下的所有<option>元素，遍历每个选项后再触发选中操作即可，同时不需要写死等待时间，Cypress会自动等待元素加载完成：

// 先获取select下所有option元素，遍历所有选项
cy.get('#filter1').find('option').each(($option, index) => {
  cy.log("loop index: " + index)
  // 两种选中方式二选一即可
  // 方式1：把索引转成字符串传入，避免类型错误
  cy.get('#filter1').select(index.toString())
  // 方式2：直接用option的value或者文本选中
  // cy.get('#filter1').select($option.val())
})

如果需要等待服务端返回选项渲染完成，可以加个断言判断选项数量大于0再开始遍历，稳定性更高：

cy.get('#filter1 option')
  .should('have.length.greaterThan', 0)
  .each(($option, index) => {
    cy.log("loop index: " + index)
    cy.get('#filter1').select(index.toString())
  })

内容的提问来源于stack exchange，提问作者TA1-q