Playwright中MUI Combobox列表项定位器解决方案咨询

• 通过选项文本直接定位
  如果下拉选项的文本是固定的，这是最直接的方式。先触发Combobox展开下拉列表，再通过文本定位点击：

  // 点击Combobox展开下拉
  await page.locator("[placeholder='Category']").click();
  // 点击指定文本的选项
  await page.getByText("目标分类名称").click();
  

  若存在重复文本，可结合父级下拉面板缩小范围：

  await page.locator("[placeholder='Category']").click();
  await page.locator("[role='listbox']").getByText("目标分类名称").click();
  

• 利用MUI的DOM角色属性定位
  MUI Combobox的下拉选项默认带有role="option"属性，下拉面板则对应role="listbox"。可以基于这些固定角色定位选项：

  await page.locator("[placeholder='Category']").click();
  // 点击第一个选项（索引从0开始）
  await page.locator("[role='listbox'] [role='option']").nth(0).click();
  

  如果选项带有固定的data-value属性，也可以直接通过该属性定位：

  await page.locator("[placeholder='Category']").click();
  await page.locator("[role='option'][data-value='目标值']").click();
  

• 动态ID后缀匹配定位
  针对动态ID的-option-N后缀，使用CSS属性选择器的$=（结尾匹配）规则定位：

  await page.locator("[placeholder='Category']").click();
  // 匹配id以"-option-0"结尾的选项（第一个选项）
  await page.locator("[id$='-option-0']").click();
  

  若需要关联Combobox的aria-activedescendant属性，也可以先获取该属性值再定位元素（适合跟踪激活状态的场景）：

  const combobox = page.locator("[placeholder='Category']");
  await combobox.click();
  const activeOptionId = await combobox.getAttribute("aria-activedescendant");
  await page.locator(`#${activeOptionId}`).click();
  

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