Cypress中如何在多个下拉表单中选中相同选项值

.select() 方法确实仅支持作用在单个<select>元素上，直接对元素集合调用会报错，你可以通过遍历匹配元素逐个执行选中操作，具体实现如下：

基础实现代码 #

// 匹配所有id以dropdown_form_开头的下拉框，逐个选中apple选项
cy.get('[id^="dropdown_form_"]').each($selectEl => {
  cy.wrap($selectEl).select('apple')
})

代码逻辑说明 #

• 你原本使用的属性选择器[id^="dropdown_form_"]是正确的，可以精准匹配所有目标下拉表单
• .each() 是Cypress提供的遍历方法，会依次处理匹配到的每一个DOM元素
• 遍历拿到的$selectEl是jQuery封装的单个DOM对象，需要用cy.wrap()转为Cypress链式对象后，才能正常调用.select()方法

适配动态渲染场景的优化写法 #

如果页面下拉框是异步加载渲染的，可以增加可见性校验和超时配置，避免命令在元素未渲染完成时执行失败：

cy.get('[id^="dropdown_form_"]', { timeout: 6000 })
  .should('have.length.greaterThan', 0) // 校验至少匹配到1个目标下拉框
  .and('be.visible')
  .each($selectEl => {
    cy.wrap($selectEl).select('apple')
  })

提示：如果部分下拉框的value属性和显示文本不一致，.select()内传入的参数要和option的value属性保持一致，否则会选中失败。

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