结合你提供的界面截图：

针对你基于ReactJS的项目，用Java版Selenium WebDriver操作模态框中的React Select组件的需求，结合你给出的HTML结构，这里有几个实用的实现方案：

方案一：模拟用户点击流程展开选择 #

这个方案完全模拟真实用户操作：先点击下拉箭头展开选项列表，再定位目标选项完成选择。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

// 假设你已初始化WebDriver实例driver
WebDriverWait wait = new WebDriverWait(driver, 10);

// 处理「Select KPI」下拉框
// 等待下拉箭头可点击并点击展开选项
WebElement kpiSelectArrow = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("#react-select-19--value + .Select-arrow-zone .Select-arrow")
));
kpiSelectArrow.click();

// 等待目标选项出现并点击（替换"目标KPI名称"为实际要选的选项文本）
WebElement targetKpiOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[contains(@class, 'Select-option') and text()='目标KPI名称']")
));
targetKpiOption.click();

// 同理处理「Select Time Period」下拉框
WebElement timePeriodSelectArrow = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("#react-select-20--value + .Select-arrow-zone .Select-arrow")
));
timePeriodSelectArrow.click();

WebElement targetTimeOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[contains(@class, 'Select-option') and text()='目标时间段']")
));
targetTimeOption.click();

方案二：利用搜索功能快速定位选项 #

你的Select组件带有is-searchable类，支持搜索输入，这种方式适合选项较多的场景：

// 处理「Select KPI」下拉框
// 等待搜索输入框可交互，输入目标文本
WebElement kpiInput = wait.until(ExpectedConditions.elementToBeClickable(
    By.id("add-kpi-kpi-select")
));
kpiInput.sendKeys("目标KPI名称");

// 等待匹配的选项出现并点击
WebElement matchedKpiOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[contains(@class, 'Select-option') and text()='目标KPI名称']")
));
matchedKpiOption.click();

// 处理「Select Time Period」下拉框同理
WebElement timePeriodInput = wait.until(ExpectedConditions.elementToBeClickable(
    By.id("add-kpi-timeperiod-select")
));
timePeriodInput.sendKeys("目标时间段");

WebElement matchedTimeOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[contains(@class, 'Select-option') and text()='目标时间段']")
));
matchedTimeOption.click();

方案三：通过ARIA属性精准定位 #

React Select会生成ARIA相关属性，利用这些属性可以更稳定地定位元素：

// 处理「Select KPI」下拉框
// 通过role="combobox"定位并点击展开选项
WebElement kpiCombobox = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("#add-kpi-kpi-select[role='combobox']")
));
kpiCombobox.click();

// 定位目标选项（结合aria-selected属性确保选中正确项）
WebElement targetOption = wait.until(ExpectedConditions.elementToBeClickable(
    By.xpath("//div[contains(@class, 'Select-option') and @aria-selected='false' and text()='目标KPI名称']")
));
targetOption.click();

关键注意事项 #

• 必须使用显式等待（WebDriverWait），避免React组件动态渲染导致的元素未找到问题。
• 如果选项文本包含特殊字符或动态内容，可调整XPath为contains(text(), '部分匹配文本')来适配。
• 操作Select前，需确保模态框已完全加载，可以先等待模态框的根元素可见。

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