如何使用Selenium正确选择自定义select-box组件内的选项

报错原因 #

Selenium 内置的 Select 工具类仅支持操作原生 HTML 标准的 <select> 标签，你遇到的 <select-box> 是前端框架封装的自定义下拉组件，本质是用 div、ul、li 模拟的下拉交互，因此无法直接用 Select 类操作。

可行操作步骤 #

• 第一步：触发下拉框展开，让选项列表渲染到页面中
  从你提供的 HTML 结构看，下拉选项列表 <ul> 受 ng-if="$ctrl.isShowingOptions" 控制，只有下拉框激活时才会显示。你可以先点击下拉的触发区域，比如只读输入框或者外层的 .SelectBox 容器：

  // 定位自定义下拉框容器
  WebElement selectBox = driver.findElement(By.xpath("//select-box[@name='countryCode']"));
  // 点击触发下拉展开
  selectBox.findElement(By.cssSelector("input.Input")).click();
  

• 第二步：等待选项列表加载完成
  加显式等待，确保选项列表可见后再操作，避免找不到元素：

  WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
  WebElement optionsList = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("ul.SelectBox-options")));
  

• 第三步：匹配目标选项并点击
  用目标文本定位对应的 <li> 元素，执行点击操作完成选择：

  // country 是你要选的选项文本
  WebElement targetOption = optionsList.findElement(By.xpath("./li[text()='" + country + "']"));
  // 若常规点击失效，可改用JS点击避免元素遮挡问题
  // JavascriptExecutor js = (JavascriptExecutor) driver;
  // js.executeScript("arguments[0].click();", targetOption);
  targetOption.click();
  

常见适配调整 #

• 如果选项文本前后有空格，可以把定位逻辑改成 contains(text(), 'xxx') 或者先获取所有li的文本做.trim()匹配
• 如果选项列表有滚动条，目标元素不在可视区域内，可以先调用 scrollIntoView 滚动到对应元素再点击
• 如果你的自定义下拉的li元素有额外的属性绑定（比如你给出的结构里有track-by、label-by属性），也可以直接通过属性值定位，比文本匹配更稳定。

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