How to Handle Static and Dynamic Dropdowns in Selenium WebDriver

Dropdowns are a common UI element in web applications. Whether it’s selecting a country, choosing a product category, or filtering a search result — dropdowns are everywhere!

In Selenium WebDriver automation, handling dropdowns depends on whether they are static (HTML <select>) or dynamic (built using JS/CSS frameworks).

This guide will help you master both static and dynamic dropdowns with real examples and best practices.

---

📘 What is a Dropdown?

A dropdown is a UI element that lets the user select one or more options from a list. In Selenium testing, we deal with two types:

🟩 Static Dropdown:

• Uses HTML <select> tag.
• Options are defined in the source code.
• Selenium provides a built-in Select class to interact.

🟨 Dynamic Dropdown:

• No <select> tag; options load dynamically via JavaScript or AJAX.
• Requires custom logic (click, wait, select text).

---

✅ Handling Static Dropdowns (Using Select Class)

🔹 Sample HTML:

htmlCopyEdit<select id="country">
  <option value="IN">India</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
</select>

🔧 Java Code:

javaCopyEditWebElement dropdown = driver.findElement(By.id("country"));
Select select = new Select(dropdown);

// Select by visible text
select.selectByVisibleText("Canada");

// Select by index
select.selectByIndex(1);

// Select by value
select.selectByValue("IN");

💡 Notes:

• Use .getFirstSelectedOption() to verify selection.
• You can also loop through all options using .getOptions().

---

⚙️ Handling Dynamic Dropdowns (Without Select Class)

🔹 Sample HTML (No <select> tag):

htmlCopyEdit<input id="search" placeholder="Search country..." />
<ul class="suggestions">
  <li>India</li>
  <li>Indonesia</li>
  <li>Canada</li>
</ul>

🔧 Java Code:

javaCopyEdit// Type in input field
driver.findElement(By.id("search")).sendKeys("Ind");

// Wait for suggestions to appear
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
List<WebElement> suggestions = wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(
  By.cssSelector(".suggestions li")
));

// Iterate and click desired value
for (WebElement option : suggestions) {
    if (option.getText().equals("India")) {
        option.click();
        break;
    }
}

💡 Notes:

• Always use explicit wait to ensure dynamic elements are loaded.
• Avoid using hard waits (Thread.sleep()).

---

🧠 Summary Table

Feature	Static Dropdown	Dynamic Dropdown
HTML Element	<select>	<ul>, <div>, custom components
Selenium Class	Select class	Use WebDriver and custom logic
Selection Methods	By text, index, value	By finding and clicking elements
Wait Required?	❌ Usually not	✅ Yes (explicit waits recommended)
Common in	Forms, basic filters	Modern apps, search boxes, AJAX lists

---

🧪 Real Testing Tip

If you’re unsure whether the dropdown is static or dynamic:

• Inspect the element.
• Look for <select> tag.
• If missing, it’s dynamic — and requires a different approach.

---

🔁 Bonus: Multi-Select Static Dropdown

javaCopyEditSelect multi = new Select(driver.findElement(By.id("colors")));
if (multi.isMultiple()) {
    multi.selectByVisibleText("Red");
    multi.selectByVisibleText("Green");
}

You can also deselect using .deselectAll() or .deselectByValue().

---

🏁 Final Thoughts

Mastering dropdowns is essential in web-based test automation.

• Use Select class for static ones.
• For dynamic dropdowns, apply custom WebDriver logic with wait conditions.

With practice, you’ll be able to handle complex UI interactions confidently.