如何在Cypress中选择Material UI自动完成列表框的选项？

目标元素 #

<input aria-invalid="false" autocomplete="off" placeholder="Category" type="text" 
  class="MuiOutlinedInput-input MuiInputBase-input 
    MuiInputBase-inputAdornedEnd MuiAutocomplete-input 
    MuiAutocomplete-inputFocused MuiAutocomplete-input 
    MuiAutocomplete-inputFocused css-16sx77j" 
  aria-autocomplete="list" autocapitalize="none" spellcheck="false" 
  value="" id="mui-621338585" 
  aria-controls="mui-621338585-listbox" 
  aria-activedescendant="mui-621338585-option-3">

这是一个名为Category的MUI Autocomplete列表框，点击下拉箭头会展开选项列表，其中id和相关属性里的mui-后缀数字是动态生成的。

我尝试过的代码 #

• 尝试通过前缀定位后取第3个元素：

cy.get('[id^=”mui-"]').eq(2);

• 尝试通过父元素查找包含选项标识的元素：

cy.get('[id^=”mui-"]')
  .find('[aria-activedescendant*="-option-"]')
  .eq(2);

• 尝试直接定位特定选项的属性：

cy.get('[aria-activedescendant*="-option-2"]');

问题 #

请问如何正确选择该列表框中的选项？

解决方案 #

针对MUI的Autocomplete组件，推荐结合placeholder文本和组件关联属性定位，不受动态ID影响，稳定性更高：

步骤1：触发下拉列表展开 #

先通过placeholder定位输入框，点击展开下拉列表：

// 定位Category输入框并展开下拉
cy.get('input[placeholder="Category"]').click();

步骤2：定位并选择目标选项 #

方法1：按索引选择选项

利用输入框的aria-controls属性关联列表框，再选择对应索引的选项（索引从0开始，eq(2)对应第3个选项）：

cy.get('input[placeholder="Category"]')
  .invoke('attr', 'aria-controls')
  .then(listboxId => {
    cy.get(`#${listboxId}`).find('[role="option"]').eq(2).click();
  });

方法2：按选项文本选择（更可靠）

如果知道目标选项的文本内容，直接通过文本定位：

cy.get('input[placeholder="Category"]').click();
cy.get('[role="option"]').contains('你的目标选项文本').click();

之前尝试失败的原因 #

• 选择器中混用了中文引号（”）和英文引号，导致匹配失败，需统一使用英文双引号。
• aria-activedescendant是输入框自身的属性，不是子元素属性，所以find方法无法找到对应元素。
• 仅通过mui-前缀定位容易受页面其他MUI组件干扰，用placeholder定位更精准。

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