How to handle hidden select dropdown

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

anyway I found a way to select element from dropdown by looping through the List and selecting by text.....

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

But the question is why i cannot use Select class and select.getFirstSelectedOption() and how to handle this? Thnx

P.s Also tried some explicit wait.

    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

Based on the image you posted with the HTML code, you should select the item from the dropdown in this manner:

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

If using Selenium 3, remove the Duration.ofXXX() and just pass the numeric values directly to the constructor.

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>

As you can see from the posted snippet, Select element is using select-hidden class to implement the dropdown. Therefore, Selenium cannot interact with it. What this application is using is called a Bootstrap Dropdown. Also, the easiest way to figure out which one to use (i.e. select vs. ul/li) is by inspecting the page and select one of the options. When you do this, it goes to the li element rather than to the option element.