Cypress无法定位下拉菜单中Dogs元素的问题求助

问题分析 #

你当前的代码找错了目标元素：

• 错误中使用的选择器.ant-select-dropdown-menu-item-selected，是下拉菜单展开后已选中选项的类名，但从你提供的DOM结构来看，当前页面仅渲染了选中值的展示区域（ant-select-selection-selected-value），下拉菜单并未展开，因此这个选择器根本找不到对应元素。

正确操作方案 #

要选中「Dogs」，需要先触发下拉菜单展开，再定位对应选项执行点击：

方案1：通过文本精准定位选项 #

// 1. 点击下拉触发区域，展开选项列表
cy.get('.ant-select-selection__rendered').click()
// 2. 找到包含"Dogs"文本的下拉选项并点击
cy.contains('.ant-select-dropdown-menu-item', 'Dogs').click()
// 可选：验证选中结果是否符合预期
cy.get('.ant-select-selection-selected-value').should('have.text', 'Dogs')

方案2：通过属性定位（如果选项有专属属性） #

如果下拉选项带有title或value等专属属性，可使用更精准的定位方式：

cy.get('.ant-select-selection__rendered').click()
cy.get('.ant-select-dropdown-menu-item[title="Dogs"]').click()

补充注意事项 #

• Ant Design下拉菜单属于动态渲染元素，只有点击触发框后才会在DOM中生成选项列表，因此必须先执行展开操作。
• cy.contains会自动等待目标元素出现，无需额外设置超时，比cy.get更适配动态生成的元素场景。
• 如果下拉选项是远程加载的，需要额外等待加载完成：

cy.get('.ant-select-selection__rendered').click()
// 等待加载状态消失
cy.get('.ant-select-loading').should('not.exist')
cy.contains('.ant-select-dropdown-menu-item', 'Dogs').click()

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