如何处理隐藏的选择下拉菜单

Question

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

HTML 代码

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

来自控制台的输出

无论如何，我找到了一种通过循环列表并按文本选择来从下拉列表中选择元素的方法......

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 类和select.getFirstSelectedOption() 以及如何处理这个问题？ Thnx

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);

输出

Answer 1

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

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() 并直接将数值传递给构造函数。

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

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

正如您从发布的代码片段中看到的，Select 元素使用 select-hidden 类来实现下拉菜单。因此，Selenium 不能与其相互作用。此应用程序使用的内容称为Bootstrap Dropdown。此外，确定使用哪一个（即 select 与 ul/li）的最简单方法是检查页面并选择其中一个选项。当您执行此操作时，它将转到 li 元素而不是 option 元素。