Selenium(Java)如何获取Svelte实现的只读input下拉框选项列表

Select类只能操作原生<select>标签，对Svelte生成的自定义下拉完全无效：

• 这个控件的可见入口是只读<input>，没有用原生select实现，调用Select相关方法必然抛错
• 下拉选项默认不挂载在DOM上，只有点击input触发组件展开后，选项节点才会被动态插入页面，静态查找找不到对应的list标签
• input带readonly属性，直接输入内容的操作会被组件拦截，无法生效

1. 触发下拉框展开 #

首先定位目标input元素，执行点击操作唤起下拉、触发选项渲染：

WebElement dropdownInput = webDriver.findElement(By.id("select-instances"));
// 点击input唤起下拉选项列表
dropdownInput.click();

2. 等待选项加载完成 #

Svelte组件的 scoped 样式类名会带统一哈希后缀（和input上的svelte-abcd后缀一致），选项元素一般自带role="option"属性，用显式等待等元素渲染完成即可：

WebDriverWait wait = new WebDriverWait(webDriver, Duration.ofSeconds(3));
// 定位所有选项元素，可根据实际渲染的DOM结构调整选择器
List<WebElement> options = wait.until(ExpectedConditions.presenceOfAllElementsLocatedBy(
    By.cssSelector(".svelte-abcd[role='option']")
));

如果点击后选项是挂载到<body>末尾而非input同级节点，直接全局搜索带对应svelte类名、role为option的元素即可，不要限定在input的父节点下查找。

3. 获取选项/选择目标值 #

拿到选项元素列表后，可直接遍历提取文本，或点击匹配的目标选项：

// 示例1：遍历打印所有选项文本
for (WebElement option : options) {
    System.out.println("下拉选项：" + option.getText());
}

// 示例2：选择指定文本的选项
String targetValue = "需要选择的实例名称";
for (WebElement option : options) {
    if (option.getText().trim().equals(targetValue)) {
        option.click();
        break;
    }
}

• 如果点击input后仍找不到选项，打开浏览器开发者工具，手动点击input唤起下拉，在Elements面板实时查看选项节点的位置、类名、属性，对应调整选择器即可
• 不要尝试给readonly的input直接调用sendKeys()传值，组件的只读逻辑会拦截输入，不会触发选择
• 如果点击后选项一闪而过消失，检查是否触发了失焦逻辑，操作过程中不要让其他元素抢占焦点

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