Selenium WebDriver：selectByVisibleText无法将选项从可用区移至选中区

使用Selenium WebDriver的selectByVisibleText()方法时，该方法能正确高亮下拉菜单中的目标选项，但无法将选中值从“可用值”区域移至“已选值”区域。

DOM HTML结构 #

<select multiple="multiple" id="lftswitcher1" size="6" class="switch-select custom-select">
  <option class="switch-option switch-right" value="[object Object]"> AAZIZ </option>
  <option class="switch-option switch-right" value="[object Object]"> abieser </option>
  <option class="switch-option switch-right" value="[object Object]"> ABlack1 </option>
  <option class="switch-option switch-right" value="[object Object]"> ACornfie </option>
  <option class="switch-option switch-right" value="[object Object]"> Administrator </option>
  <option class="switch-option switch-right" value="[object Object]"> afabian </option>
  <option class="switch-option switch-right" value="[object Object]"> AFord </option>
  <option class="switch-option switch-right" value="[object Object]"> AGardine </option>
  <option class="switch-option switch-right" value="[object Object]"> AIG Trading Group, Inc. </option>
  <option class="switch-option switch-right" value="[object Object]"> akell91 </option>
  <option class="switch-option switch-right" value="[object Object]"> akeogh </option>
  <option class="switch-option switch-right" value="[object Object]"> akoehle </option>
  <option class="switch-option switch-right" value="[object Object]"> Alan B. Aronowitz </option>
</select>

执行代码 #

WebElement visibleElement = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("lftswitcher1")));
        
Select select2 = new Select(visibleElement);        
select2.selectByVisibleText("AAZIZ");

解决方案 #

这类带左右切换的多选框属于自定义组件，原生<select multiple>只是基础结构，实际的“值移动”逻辑是通过页面按钮或JavaScript事件触发的，原生Selenium的Select类仅能操作原生select的选中状态，无法触发组件的移动逻辑。可以尝试以下方法：

• 模拟用户完整操作：先选中目标选项，再点击界面上的“添加”/“移动”按钮（比如界面上的>>按钮）：

  // 精准定位带空格的选项
  WebElement targetOption = visibleElement.findElement(By.xpath(".//option[normalize-space(text())='AAZIZ']"));
  targetOption.click();
  // 点击移动按钮（需根据实际DOM调整选择器）
  WebElement moveBtn = driver.findElement(By.cssSelector(".switch-move-right"));
  moveBtn.click();
  

• 触发组件的JavaScript事件：部分自定义组件会监听change或自定义事件，选中选项后手动触发：

  JavascriptExecutor js = (JavascriptExecutor) driver;
  // 选中选项后触发change事件
  js.executeScript("arguments[0].dispatchEvent(new Event('change'));", visibleElement);
  

• 直接调用组件内置方法：如果了解该组件的JavaScript API，可直接调用移动方法：

  js.executeScript("document.getElementById('lftswitcher1').transferSelected();");
  

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