如何使用Cypress选择Material UI（MUI）下拉框选项及高亮项？

MUI的下拉框（不管是基础Select还是带搜索的Autocomplete），用Cypress选其实就是两步：先点开下拉框，再点目标选项。下面分两种最常见的情况讲：

一、基础Select组件（无搜索功能） #

这种下拉框点一下就直接展开所有选项，操作很直接：

1. 先找到下拉框的触发按钮，点开它
   你可以通过标签文本定位，比如下拉框的标签是「用户角色」，就这么写：

   cy.get('label:contains("用户角色")').click()
   

   如果标签不好找，也可以用MUI自带的ARIA属性，下拉框按钮一般带role="button"和aria-haspopup="listbox"：

   cy.get('[role="button"][aria-haspopup="listbox"]').click()
   

2. 选择你要的选项
   展开后，所有选项都在role="listbox"的容器里，每个选项是role="option"的元素，直接通过文本定位点击就行：

   cy.get('[role="option"]:contains("管理员")').click()
   

举个完整例子：

// 点开「用户角色」下拉框
cy.get('label:contains("用户角色")').click()
// 选择「管理员」选项
cy.get('[role="option"]:contains("管理员")').click()

二、带搜索的Autocomplete组件 #

如果是带搜索框的下拉（MUI的Autocomplete），步骤多一步输入关键词：

1. 点击激活搜索框
   搜索框的ARIA角色是combobox，直接定位点击：

   cy.get('[role="combobox"]').click()
   

2. 输入要搜索的关键词
   还是用这个combobox元素输入文本：

   cy.get('[role="combobox"]').type("管理员")
   

3. 点击匹配的选项
   和之前一样，用role="option"定位点击：

   cy.get('[role="option"]:contains("管理员")').click()
   

完整例子：

cy.get('[role="combobox"]').click()
cy.get('[role="combobox"]').type("管理员")
cy.get('[role="option"]:contains("管理员")').click()

几个实用小技巧 #

• 尽量用**ARIA角色（role）**定位，别用MUI的类名（比如MuiSelect-root），因为类名会随版本变，角色属性更稳定
• 如果选项文本重复，用索引定位更准：cy.get('[role="option"]').eq(1).click()（eq从0开始，eq(1)是第二个选项）
• 要是选项是异步加载的，给Cypress加个超时等待：cy.get('[role="option"]', { timeout: 5000 }).contains("管理员").click()，确保选项加载出来再操作

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