Selenium Java处理React Material UI无标识动态下拉框选值问题

针对React Material UI这种无固定ID、选项顺序动态变化的下拉框，直接通过选项文本定位是最可靠的方案，具体实现步骤如下：

核心思路 #

跳过依赖动态变化的aria-activedescendant属性，直接基于选项的可见文本定位目标元素，结合显式等待处理React组件的异步渲染特性。

具体实现步骤 #

1. 触发下拉框展开
   先点击下拉输入框（或触发按钮）展开选项列表，用显式等待确保元素可交互：

   // 定位下拉输入框，可根据实际HTML结构调整定位器（比如placeholder、aria-label）
   WebElement dropdownInput = new WebDriverWait(driver, Duration.ofSeconds(10))
           .until(ExpectedConditions.elementToBeClickable(By.cssSelector("[aria-label='下拉选择框']")));
   dropdownInput.click();
   

2. 等待选项列表加载完成
   等待下拉选项容器出现，确保React已渲染出所有选项：

   // 等待选项列表容器加载，Material UI下拉选项通常在ul标签下，可按需调整选择器
   new WebDriverWait(driver, Duration.ofSeconds(10))
           .until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("ul[role='listbox']")));
   

3. 定位并点击目标选项
   通过选项的文本内容定位元素，若选项不在可视区域，先滚动到元素位置再点击：

   String targetOptionText = "需要选中的选项文本";
   // 用XPath精准匹配文本，若文本含特殊字符或需模糊匹配，可改用contains(text(), '部分文本')
   WebElement targetOption = new WebDriverWait(driver, Duration.ofSeconds(10))
           .until(ExpectedConditions.elementToBeClickable(By.xpath("//li[text()='" + targetOptionText + "']")));
   
   // 滚动到目标选项（避免因选项过多被遮挡）
   ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", targetOption);
   targetOption.click();
   

4. 验证选中状态（可选）
   检查下拉输入框的文本或相关属性，确认选项已选中：

   String selectedText = dropdownInput.getAttribute("value");
   if (selectedText.equals(targetOptionText)) {
       System.out.println("选项选中成功");
   } else {
       System.out.println("选项选中失败");
   }
   

注意事项 #

• 如果选项文本存在换行或多余空格，可使用normalize-space()处理XPath，比如//li[normalize-space(text())='" + targetOptionText + "']
• 若下拉框是虚拟滚动（包含大量选项），可能需要先滚动加载出目标选项，再进行定位
• 优先使用显式等待，避免隐式等待适配React异步渲染时的不稳定问题

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