如何通过Selenium单元测试操作Syncfusion下拉列表？

问题背景 #

在单元测试中尝试验证用户能否访问并选择Syncfusion下拉列表的选项，使用FindElement定位ID为industry的元素后，用SelectElement操作失败，无法选中选项。

问题原因 #

*Syncfusion的SfDropDownList*渲染后并非原生HTML <select> 标签，而是自定义的DOM结构，因此Selenium原生的SelectElement类无法识别和操作该组件，必须模拟真实用户的交互流程（点击展开下拉、选择选项）。

解决方案步骤 #

• 显式等待下拉框加载：避免页面未加载完成就执行操作，使用WebDriverWait等待元素可点击。
• 触发下拉弹窗：点击下拉框元素，展开选项列表。
• 等待选项列表渲染：等待下拉选项加载完成并可点击。
• 选择目标选项：定位目标选项并点击。
• 验证选中结果：检查下拉框显示的文本是否为选中内容。

修改后的测试代码 #

// 显式等待，最长等待10秒
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));

// 等待下拉框并点击展开
var dropDown = wait.Until(d => d.FindElement(By.Id("industry")));
dropDown.Click();

// 等待目标选项出现并点击
var targetOption = wait.Until(d => d.FindElement(By.XPath("//div[text()='Construction']")));
targetOption.Click();

// 验证选中的文本
Assert.Contains("Construction", dropDown.Text);

补充说明 #

• 如果选项列表支持过滤功能，可先在下拉框的输入框中输入关键词缩小范围，再选择匹配选项：

// 点击下拉框后，定位输入框并输入关键词
var inputBox = wait.Until(d => d.FindElement(By.CssSelector("#industry input")));
inputBox.SendKeys("Construction");

// 选择匹配的选项
var targetOption = wait.Until(d => d.FindElement(By.XPath("//div[text()='Construction']")));
targetOption.Click();

• 若XPath定位不稳定，可根据页面实际渲染的DOM结构调整定位方式（比如通过类名、自定义数据属性等）。

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