Cypress使用问题：针对多选项下拉列表不知如何选取合适选择器

你当前遇到的是DevExpress组件渲染的非原生下拉菜单，Cypress内置的select()方法仅支持原生<select> + <option>结构的下拉，对这种自定义div渲染的下拉不生效，按以下步骤操作即可：

• 第一步：先点击下拉触发元素唤起选项面板，替换成你实际页面上的下拉触发区域选择器即可：

// 示例为 DevExpress 下拉组件常用的触发区域class，可根据实际DOM调整
cy.get('.dx-dropdowneditor-input-wrapper').click()

• 第二步：通过文本匹配定位目标选项直接点击，针对你给出的DOM结构可以直接用如下写法，替换成你要选中的选项文本即可：

// 精确匹配选项文本
cy.get('.dx-list-item[role="option"]').contains('charlie sheen').click()

• 可选：选中后加断言验证是否选中成功

cy.get('.dx-list-item[role="option"]').contains('charlie sheen')
  .should('have.attr', 'aria-selected', 'true')

特殊场景适配 #

如果遇到文本大小写不统一、前后有多余空格、或者选项被遮挡的情况，可以调整参数适配：

// 忽略大小写、自动trim前后空格、强制点击
cy.get('.dx-list-item[role="option"]')
  .contains('charlie sheen', { matchCase: false, trim: true })
  .click({ force: true })

如果你的下拉选项是滚动加载的，Cypress会自动滚动到匹配到的元素位置，不需要额外写滚动逻辑。

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