如何在Cypress中获取Material UI Autocomplete组件下拉框的值

问题原因 #

你原有代码存在两处核心错误：

• 选择器使用错误：组件声明的是data-testid="tagAutocomplete"，你使用了类选择器.tagAutocomplete，无法匹配到目标元素
• 下拉元素定位逻辑错误：MUI的Autocomplete下拉选项默认挂载在body根节点下，不属于Autocomplete组件的DOM子节点，直接在组件内部查找下拉选项无法命中

完整测试代码 #

// 1. 定位Autocomplete内部的输入框
cy.get('[data-testid="tagAutocomplete"]').find('input').as('autoInput')

// 2. 激活组件并输入测试用户名，`{ force: true }`用于规避MUI输入框的只读限制
cy.get('@autoInput').click().type('ntest_user', { force: true })

// 3. 等待下拉框渲染，点击匹配到的目标选项
cy.contains('[role="option"]', 'ntest_user').click()

// 4. 校验选中结果
cy.get('@autoInput').should('have.value', 'ntest_user')

可选操作说明 #

如果你需要按索引选择选项，替换第三步的代码为：

cy.get('[role="option"]').eq(0).click()

如果不需要触发输入匹配，想要直接选中指定选项，也可以先点击输入框激活下拉，再直接选中目标选项即可。

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