如何使用Selenium和xUnit为Blazor应用的Syncfusion SfDropDownList赋值

我正在对Blazor Web应用进行Selenium自动化测试，需要为SfDropDownList组件设置值。
我已经创建了包含SfDropDownList的空Blazor项目，以及搭载Selenium和XUnit的测试项目。

SfDropDownList组件代码如下：

<SfDropDownList ID="MyDropdown" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
  };
}

我目前实现下拉框赋值的方案是通过ID定位SfDropDownList，传入自定义Games类的Text属性值，但是需要重复执行两次操作才能保证值设置成功，代码如下：

Thread.Sleep(TimeSpan.FromMilliseconds(250));
_driver.FindElement(By.Id("MyDropdown")).SendKeys("Basketball");

Thread.Sleep(TimeSpan.FromMilliseconds(250));
_driver.FindElement(By.Id("MyDropdown")).SendKeys("Basketball");

测试运行步骤：

1. 在http://localhost:5000启动服务，可选两种方式：
   • 打开Visual Studio，选择SyncfusionSelenium而非IIS Server作为启动选项，按下Ctrl+F5运行
   • 打开项目所在文件夹，启动控制台输入命令dotnet watch run debug
2. 打开测试资源管理器，运行或调试名为"Test1"的测试用例

我暂时没有找到针对SfDropDownList的同类操作示例，求更稳定的实现方案。

解决方案 #

你现有方案需要两次执行的原因是SfDropDownList作为自定义封装组件，第一次SendKeys仅会触发组件聚焦、加载下拉选项列表的逻辑，组件内部状态未完成更新前第二次输入才能命中匹配的选项。你可以选择以下两种更稳定的方案替代硬编码延迟+重复输入的写法：

方案1：模拟用户真实操作（兼容性最高） #

完全模拟用户点击展开下拉框、选择选项的操作，使用显式等待替代固定Sleep，适配不同环境的加载速度：

// 初始化显式等待，最长等待3秒
var wait = new WebDriverWait(_driver, TimeSpan.FromSeconds(3));
// 等待下拉框可交互
var dropdown = wait.Until(driver => driver.FindElement(By.Id("MyDropdown")));
// 点击展开下拉选项
dropdown.Click();
// 等待目标选项渲染完成后点击
var targetOption = wait.Until(driver => driver.FindElement(By.XPath("//li[normalize-space(text())='Basketball']")));
targetOption.Click();

方案2：调用组件客户端API（执行速度最快） #

Syncfusion Blazor组件底层是基于JS的Ej2组件，直接调用暴露的客户端API赋值，不需要等待UI渲染，稳定性最高：

var js = (IJavaScriptExecutor)_driver;
// 获取组件实例，直接设置绑定的Value值（对应Games类的ID字段）
js.ExecuteScript("document.getElementById('MyDropdown').ej2_instances[0].value = 'Game3';");
// 触发数据绑定同步Blazor组件状态
js.ExecuteScript("document.getElementById('MyDropdown').ej2_instances[0].dataBind();");

两种方案都不需要重复执行操作，也不用硬编码等待时间，测试执行速度和稳定性都远高于现有实现。

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