如何使用Cypress从下拉菜单中选择对应值？

你之前编写的代码未生效，核心原因是CSS 选择器不支持直接使用#前缀匹配数字开头的 ID 属性，cy.get('#0')本身就无法定位到对应元素，可参考以下方案实现：

• 方案1：修正 ID 选择器写法，适配数字开头的ID
  改用属性选择器定位元素，同时添加可见性断言，保证下拉展开后元素加载完成再执行点击操作，代码示例如下：

  // 点击展开下拉框
  cy.get('.dropdown-heading-dropdown-arrow').click()
  // 用属性选择器定位数字ID的选项，确认可见后点击
  cy.get('[id="0"]').should('be.visible').click()
  

• 方案2：带搜索框下拉的更稳定实现（推荐）
  按索引定位容易因为选项顺序变更导致用例失效，你可以模拟用户真实操作，输入搜索内容后匹配文本点击，代码示例如下：

  // 点击展开下拉框
  cy.get('.dropdown-heading-dropdown-arrow').click()
  // 替换为你实际的搜索框选择器，输入要选择的选项内容
  cy.get('.下拉搜索框的class属性值').type('目标选项的文本内容')
  // 匹配对应文本的选项，确认可见后点击
  cy.contains('.下拉选项的通用class属性值', '目标选项的文本内容').should('be.visible').click()
  

• 方案3：处理元素遮挡导致的点击失效
  如果出现元素不可交互的报错，可添加强制点击参数绕过遮挡判定：

  cy.get('[id="0"]').click({force: true})
  

补充说明 #

如果是原生<select>标签实现的下拉，可直接调用 Cypress 内置的select()方法，不需要手动展开点击，示例：cy.get('select标签的选择器').select('目标选项文本')，你当前使用的自定义下拉框使用前面的点击方案即可。

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