使用Selenium WebDriver Java处理多选下拉框问题求助

嘿，针对你用Selenium Java操作这个isteven自定义多选下拉的需求，我给你两种实用的方案——这种非原生的select控件没法直接用Selenium自带的Select类，得用模拟用户交互或者直接操作Angular scope的方式来搞定：

方法一：模拟用户点击操作（最贴近真实用户行为） #

这种方法就是模拟用户点开下拉、点击选项的步骤，稳定性高，适合大多数场景：

1. 先定位下拉按钮，点击展开选项列表
2. 定位目标选项并点击，多选的话重复这一步就行

代码示例：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;

// 初始化显式等待（避免元素未加载完成的问题）
WebDriverWait wait = new WebDriverWait(driver, 10);

// 等待下拉按钮可点击并点击展开
WebElement dropdownBtn = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("span.multiSelect.buttonClicked button")
));
dropdownBtn.click();

// 选择第一个选项（比如文本为"Male"的选项，可根据实际文本调整）
WebElement maleOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[contains(@class, 'multi')]//div[text()='Male']")
));
maleOption.click();

// 如果需要多选，比如再选"Female"
WebElement femaleOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[contains(@class, 'multi')]//div[text()='Female']")
));
femaleOption.click();

方法二：直接操作Angular Scope（适合复杂场景） #

因为这个控件是基于Angular的，我们可以直接通过JavaScript修改它的scope数据，触发选中状态，还能直接调用控件绑定的search()方法：

import org.openqa.selenium.JavascriptExecutor;

JavascriptExecutor js = (JavascriptExecutor) driver;

// 选中id为1的选项（根据你的实际id值调整）
js.executeScript("""
    var multiSelectScope = angular.element(document.querySelector('div[isteven-multi-select]')).scope();
    // 遍历genders数组，设置目标项的ticked属性为true
    multiSelectScope.genders.forEach(function(item) {
        if(item.id === 1) {
            item.ticked = true;
        }
    });
    // 触发控件绑定的search()方法
    multiSelectScope.search();
    // 刷新Angular视图，确保UI同步更新
    multiSelectScope.$apply();
""");

额外注意点 #

• 定位器要根据页面实际结构调整：如果选项有专属class、data属性，优先用这些来写更稳定的定位器，比如By.cssSelector("div.multi-option[data-id='1']")
• 显式等待一定要加：避免页面加载慢导致元素找不到的异常，这是Selenium自动化里的最佳实践

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