How do you test a dropdown built with custom HTML instead of <select>?

Handling Custom HTML Dropdowns (Non-) Many modern UIs (React, Angular, Material UI) build dropdowns using <div>, <ul>, <li> instead of native <select>. The Selenium Select class only works with native <select> — use this approach for custom ones: Step-by-Step Approach // Step 1: Click the dropdown trigger to expand it WebElement dropdown = driver.findElement(By.cssSelector(".dropdown-trigger")); dropdown.click(); // Step 2: Wait for options to appear WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5)); wait.until(ExpectedConditions.visibilityOfElementLocated( By.cssSelector(".dropdown-menu") )); // Step 3: Click the desired option by visible text WebElement option = driver.findElement( By.xpath("//ul[@class='dropdown-menu']//li[text()='India']") ); option.click(); Generic Reusable Method public void selectFromCustomDropdown(String dropdownLocator, String optionText) { // Open dropdown driver.findElement(By.cssSelector(dropdownLocator)).click(); // Wait for options list WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5)); wait.until(ExpectedConditions.visibilityOfElementLocated( By.xpath("//li[normalize-space(text())='" + optionText + "']") )); // Click matching option driver.findElement( By.xpath("//li[normalize-space(text())='" + optionText + "']") ).click(); } // Usage selectFromCustomDropdown(".country-dropdown", "India"); If Options Are Dynamically Filtered (Search Dropdown) // Type in the search box inside the dropdown WebElement searchBox = driver.findElement(By.cssSelector(".dropdown-search")); searchBox.sendKeys("India"); // Wait for filtered results and click wait.until(ExpectedConditions.visibilityOfElementLocated( By.xpath("//li[contains(text(),'India')]") )).click(); Key Rule Native <select> → use Select class Custom div/ul/li dropdown → click trigger → wait → click option Search-based dropdown → type to filter → click result