Handling Custom Dropdowns without Select Tags

🏷️Scenario Overview

Handling Custom Dropdowns without Select Tags

Key Takeaways & Cheat Sheet

✓Confirm the element is not built using standard HTML select options
✓Click the dropdown wrapper element to expand options in DOM
✓Wait for options visibility using explicit ExpectedConditions
✓Locate and click target option by relative text value

Short Direct Answer

Modern frontend frameworks build custom, stylable dropdowns using divs, spans, or ul/li lists instead of standard HTML `<select>` tags. To automate these: click the dropdown container to expand the options, wait explicitly for the option elements list to be rendered on the page, and perform a standard click on the list item containing your target text.

⚠️ Senior Warning (Red Flag)

Do not instantiate the Selenium Select helper class on non-select tags. Doing so throws an UnexpectedTagNameException immediately.

💡 STAR Deep Dive Explanation & Pro Tip

Always inspect the DOM before coding. If you do not see a <select> tag in the HTML structure, you must treat it as a standard interactive element click workflow.

SeleniumAutomation.java

Selenium 4 + Java

// ✅ Expand custom React/Angular dropdown
driver.findElement(By.className("custom-select-trigger")).click();

// ✅ Wait explicitly for dynamic options list visibility
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
WebElement targetOption = wait.until(
    ExpectedConditions.elementToBeClickable(
        By.xpath("//li[@class='option' and contains(text(),'Premium Account')]")
    )
);

// ✅ Select the option
targetOption.click();