如何用Selenium C#处理React.js的input-select控件：赋值及取值异常

嘿，我之前也跟react-select组件死磕过好一阵，太懂你这种SendKeys没用的挫败感了！这种自定义下拉组件根本不是原生<select>，直接用常规方法肯定行不通，得针对它的DOM结构来操作。

为什么SendKeys没用？ #

你之前尝试的SendKeys大概率是发给了外层的<div>或者占位符元素，但react-select的输入逻辑是绑定到内部的特定元素上的——外层的那些元素只是UI展示，根本不接收键盘输入事件。

解决方案（分场景） #

场景1：直接选择已知的服务类选项 #

如果已经知道要选的选项文本，直接点击展开下拉再选就行：

// 先初始化显式等待，避免元素未加载完成就操作
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));

// 点击react-select控件，展开下拉框
var selectControl = wait.Until(ExpectedConditions.ElementToBeClickable(By.CssSelector(".Select.Select--single.Select-control")));
selectControl.Click();

// 定位到目标选项并点击（用XPath匹配文本，注意normalize-space处理空格）
var targetOption = wait.Until(ExpectedConditions.ElementToBeClickable(
    By.XPath("//div[contains(@class, 'Select-option') and normalize-space(text())='你的目标服务类']")
));
targetOption.Click();

场景2：先搜索再选择（适配is-searchable属性的组件） #

你的组件带is-searchable，说明支持搜索，那得先找到真正的输入框：

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));

// 展开下拉框
var selectControl = wait.Until(ExpectedConditions.ElementToBeClickable(By.CssSelector(".Select.Select--single.Select-control")));
selectControl.Click();

// 找到内部的真实输入框（react-select的输入框通常嵌套在.Select-input里）
var searchInput = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector(".Select-input input")));
searchInput.SendKeys("要搜索的服务类关键词");

// 等待搜索结果出现后点击目标选项
var targetOption = wait.Until(ExpectedConditions.ElementToBeClickable(
    By.XPath("//div[contains(@class, 'Select-option') and normalize-space(text())='匹配的服务类']")
));
targetOption.Click();

场景3：获取已选中的服务类值 #

如果需要读取当前选中的内容，找展示选中值的元素就行：

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
// 选中的值通常在.Select-value-label里
var selectedService = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector(".Select-value-label"))).Text;
Console.WriteLine("当前选中的服务类：" + selectedService);

小提示 #

• 不要用动态生成的ID（比如react-select-2--value）来定位，每次渲染ID可能变，用class或者属性组合更稳定
• 一定要用显式等待，React组件是动态渲染的，直接FindElement很容易报错

内容的提问来源于stack exchange，提问作者Álefe Cardozo Silva