Cypress中无select标签时，如何操作自定义下拉框选择选项？

没有<select>标签的自定义下拉框（比如你使用的React FormSelect组件），无法直接用cy.select()操作，需要通过模拟用户真实交互或触发组件事件来实现选择，以下是具体方案：

方法一：模拟用户真实交互（推荐，贴合端到端测试场景） #

这类自定义下拉框的交互逻辑通常是点击展开选项列表，再选择目标选项，按步骤模拟即可：

// 点击下拉框控件展开选项列表
cy.get('[data-cy="currency"]').find('.Select__control').click()

// 等待选项菜单加载完成，点击目标选项"USD"
cy.get('.Select__menu').contains('USD').click()

// 可选：验证选中结果是否正确显示
cy.get('[data-cy="currency"]').find('.Select__single-value').should('contain', 'USD')

注意：优先用data-cy="currency"定位组件，避免依赖动态生成的CSS类名（比如css-b62m3t-container这类易变的类），保证测试稳定性。如果选项是异步加载的，可以添加cy.wait()或should('be.visible')确保元素就绪。

方法二：直接触发组件变更事件（适合快速测试，跳过UI交互） #

如果不需要模拟完整UI流程，可以直接操作隐藏输入框并触发变更：

// 定位隐藏的currency输入框，设置值并触发change事件
cy.get('[name="currency"][type="hidden"]')
  .invoke('val', 'USD')
  .trigger('change')

说明：这种方式跳过了UI交互，适合需要快速验证业务逻辑的场景，但不如第一种方法贴合用户真实操作。

你之前方法失败的原因 #

• cy.select()仅支持原生<select>元素，自定义下拉框是用div模拟的，因此报错
• type('USD')只是在输入框中输入文本，但这类组件需要选择预设选项，不会直接将输入文本设为选中值，所以无法显示结果

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