如何处理隐藏的 select 下拉菜单

Question

Faced the situation when using Select class, selenium complains that "element not interactable".

HTML code

        driver.findElement(By.cssSelector("div.select")).click();
        Select select = new Select(driver.findElement(By.id("phonePrefix")));
        select.selectByIndex(5);

Output from the console

无论如何，我找到了一种方法，通过循环遍历列表和 select 通过文本从下拉列表中获取 select 元素.....

driver.findElement(By.cssSelector("div.select")).click();
        
        WebElement drop = driver.findElement(By.cssSelector("select"));
        
        List<WebElement> countryies = driver.findElements(By.cssSelector("ul[class='select-options'] li"));
        for(WebElement i:countryies) {
            System.out.println(i.getText());
            if(i.getText().contains("+93 Afghanistan")) {
                i.click();
                break;
            }
        }

但问题是为什么我不能使用 Select class 和 select.getFirstSelectedOption() 以及如何处理这个问题？谢谢

P.s 还尝试了一些明确的等待。

    driver.get("https://banking.idram.am/Account/login");
        driver.findElement(By.cssSelector("div.select")).click();
        wait.until(ExpectedConditions.elementToBeClickable(By.id("phonePrefix")));
        Select select = new Select(driver.findElement(By.id("phonePrefix")));
        select.selectByIndex(5);

Output

Answer 1

根据您使用 HTML 代码发布的图片，您应该 select 以这种方式从下拉列表中选择项目：

public class DropDownDemo {
    public static void main(String[] args) throws Exception {
        System.setProperty("webdriver.chrome.driver", "YOUR_PATH_TO_DRIVER_EXE_HERE");
        WebDriver driver = new ChromeDriver();
        driver.get("https://banking.idram.am/Account/login");
        driver.manage().window().maximize();
        WebElement divSelect = new WebDriverWait(driver, Duration.ofSeconds(5), Duration.ofMillis(100)).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div.select")));
        divSelect.click();
        WebElement option = new WebDriverWait(driver, Duration.ofSeconds(10), Duration.ofMillis(10)).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//li[text()='+93 Afghanistan']")));
        option.click();
        Thread.sleep(5000); // only to see the result
        driver.close();
    }
}

如果使用 Selenium 3，请删除 Duration.ofXXX() 并将数值直接传递给构造函数。

why I cannot use Select class and select.getFirstSelectedOption() and how to handle this?

<select class="phonePrefix select-hidden" required="required" name="phonePrefix" id="phonePrefix">
    ...
</select>

正如您从发布的代码片段中看到的那样，Select 元素正在使用 select-hidden class 来实现下拉菜单。因此，Selenium 无法与之交互。这个应用程序使用的是 Bootstrap Dropdown。此外，确定使用哪一个（即 select 与 ul/li）的最简单方法是检查页面和 select 选项之一。当您这样做时，它会转到 li 元素而不是 option 元素。

如何处理隐藏的 select 下拉菜单

How to handle hidden select dropdown

java

selenium

select

dropdown