A Bootstrap Dropdown is a user-interface component commonly used in modern web applications to display a list of options when a user clicks or interacts with a button, link, or other control. Bootstrap provides predefined CSS and JavaScript behavior for creating responsive dropdown menus.
In Selenium WebDriver automation, Bootstrap Dropdowns are important because they may look similar to standard HTML dropdowns but are often implemented using buttons, links, lists, div elements, and JavaScript rather than the native HTML <select> element.
Because Bootstrap Dropdowns are generally custom dropdown components, Selenium's Select class should not be used unless the dropdown is actually implemented using a native <select> element.
Learn more about Selenium training at JustAcademy Selenium Training and explore the Free Course Demo Registration.
A Bootstrap Dropdown is a toggleable menu that displays a collection of options or actions. It is commonly used in navigation bars, user profiles, settings menus, filters, action buttons, and other web application interfaces.
A typical Bootstrap Dropdown contains a trigger element and a menu containing multiple options.
Button / Link
|
v
Bootstrap Dropdown
|
+---- Option 1
+---- Option 2
+---- Option 3
+---- Option 4
Modern websites frequently use Bootstrap or Bootstrap-like components instead of traditional HTML controls. Selenium testers therefore need to understand how these components are structured in the DOM.
<select> element.| Feature | HTML Select | Bootstrap Dropdown |
|---|---|---|
| HTML Element | <select> | Usually button/link + menu elements |
| Selenium Class | Select | Usually normal WebDriver commands |
| Selection | selectByVisibleText() | Click the required menu item |
| JavaScript | Usually not required for basic selection | Frequently involved |
| Dynamic Behavior | Limited | Common |
| Locator Strategy | Select element | Button, link, CSS, XPath, text, attributes |
The Selenium Select class is designed for HTML <select> elements. A Bootstrap Dropdown normally does not use this element.
WebElement dropdown = driver.findElement(By.id("country"));
Select select = new Select(dropdown);
select.selectByVisibleText("India");
The above approach is correct only when the element is actually a native <select>.
For a Bootstrap Dropdown, the normal approach is:
driver.findElement(By.id("countryDropdown")).click();
driver.findElement(By.xpath("//a[normalize-space()='India']")).click();
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
Select Country
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">India</a></li>
<li><a class="dropdown-item" href="#">USA</a></li>
<li><a class="dropdown-item" href="#">Canada</a></li>
</ul>
</div>
The trigger is the element that opens the dropdown menu. It is commonly a button or anchor element.
<button class="dropdown-toggle"
data-bs-toggle="dropdown">
Select Country
</button>
In Selenium, the trigger must normally be clicked before the menu items can be interacted with.
The dropdown menu contains the available options.
<ul class="dropdown-menu">
<li><a class="dropdown-item">India</a></li>
<li><a class="dropdown-item">USA</a></li>
<li><a class="dropdown-item">Canada</a></li>
</ul>
Selenium can locate these options using their visible text, class, attributes, XPath, CSS selectors, or other stable properties.
Launch Browser
|
v
Open Web Page
|
v
Locate Dropdown Trigger
|
v
Click Dropdown
|
v
Wait for Menu
|
v
Locate Required Option
|
v
Click Option
|
v
Verify Selection
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class BootstrapDropdownExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://example.com");
driver.findElement(By.id("countryDropdown")).click();
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
driver.quit();
}
}
One of the simplest approaches is to locate the menu item using its visible text.
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
The normalize-space() function helps when unnecessary whitespace exists around the visible text.
If dropdown items have a stable Bootstrap class such as dropdown-item, CSS selectors can be useful.
driver.findElement(
By.cssSelector(".dropdown-item")
).click();
However, if multiple dropdown items exist, this may click the first matching element. A more specific locator should be preferred.
driver.findElement(
By.cssSelector(".dropdown-menu .dropdown-item")
).click();
For a specific option, an attribute or unique structure should be used where available.
driver.findElement(
By.xpath("//a[contains(normalize-space(),'India')]")
).click();
This can be useful when the exact text contains additional dynamic content.
If the dropdown item has a unique ID, an ID locator is generally straightforward.
driver.findElement(By.id("indiaOption")).click();Modern applications may contain custom data attributes that can provide useful locators.
driver.findElement(
By.cssSelector("[data-country='india']")
).click();
Stable application-specific attributes are often preferable to fragile XPath expressions.
Dropdown options do not always use anchor tags. They may be buttons.
<div class="dropdown-menu">
<button class="dropdown-item">Edit</button>
<button class="dropdown-item">Delete</button>
<button class="dropdown-item">Download</button>
</div>
Selenium can locate the button using its visible text.
driver.findElement(
By.xpath("//button[normalize-space()='Download']")
).click();
<div class="dropdown-menu">
<a class="dropdown-item" href="/profile">Profile</a>
<a class="dropdown-item" href="/settings">Settings</a>
<a class="dropdown-item" href="/logout">Logout</a>
</div>
driver.findElement(
By.xpath("//a[normalize-space()='Settings']")
).click();
In many Bootstrap implementations, the menu is hidden until the trigger is activated. Selenium may therefore be unable to interact with a menu item before the dropdown is opened.
driver.findElement(By.id("menuButton")).click();
driver.findElement(
By.xpath("//a[normalize-space()='Settings']")
).click();
Before opening the dropdown, its menu may have CSS properties such as display: none or may simply be hidden by Bootstrap classes.
<div class="dropdown-menu">
...
</div>
After clicking the trigger, Bootstrap may add a show class.
<div class="dropdown-menu show">
...
</div>
This change can be useful when debugging or building locators.
WebElement menu = driver.findElement(
By.cssSelector(".dropdown-menu")
);
if (menu.isDisplayed()) {
System.out.println("Dropdown is open");
}
Dynamic Bootstrap components may require an explicit wait before an option becomes clickable.
import java.time.Duration;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
driver.findElement(By.id("menuButton")).click();
WebElement option = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//a[normalize-space()='India']")
)
);
option.click();
A fixed delay can make tests slower and does not guarantee that the element will be ready.
Thread.sleep(3000);
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
A better approach is:
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement option = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//a[normalize-space()='India']")
)
);
option.click();
A Bootstrap Dropdown normally represents a single menu interaction. However, some applications use a Bootstrap-styled custom dropdown for multiple selections.
In such cases, each option may contain a checkbox or selection state.
<div class="dropdown-menu">
<label>
<input type="checkbox" value="Java">
Java
</label>
<label>
<input type="checkbox" value="Python">
Python
</label>
</div>
driver.findElement(By.id("skillDropdown")).click();
driver.findElement(
By.xpath("//label[normalize-space()='Java']/input")
).click();
driver.findElement(
By.xpath("//label[normalize-space()='Python']/input")
).click();
When a Bootstrap dropdown contains checkboxes, Selenium should interact with the checkbox rather than treating the component as a native select element.
WebElement checkbox = driver.findElement(
By.cssSelector("input[value='Java']")
);
if (!checkbox.isSelected()) {
checkbox.click();
}
Some modern applications provide searchable Bootstrap-style dropdowns.
driver.findElement(By.id("countryDropdown")).click();
WebElement searchBox = driver.findElement(
By.cssSelector(".dropdown-menu input[type='search']")
);
searchBox.sendKeys("India");
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
Dropdown options may be loaded dynamically from an API or database. The option might not exist immediately after the dropdown is opened.
driver.findElement(By.id("countryDropdown")).click();
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement india = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//a[normalize-space()='India']")
)
);
india.click();
Visible text can be useful when the text is stable and unique.
By optionLocator = By.xpath(
"//div[contains(@class,'dropdown-menu')]//*[normalize-space()='India']"
);
driver.findElement(optionLocator).click();
WebElement dropdown = driver.findElement(
By.cssSelector(".dropdown")
);
Class-based locators are useful when the class is stable, but generic Bootstrap classes may occur many times on the page.
WebElement trigger = driver.findElement(
By.cssSelector(".dropdown-toggle")
);
trigger.click();
If a page contains several Bootstrap Dropdowns, use a parent container to narrow the search.
WebElement userMenu = driver.findElement(
By.id("userMenu")
);
userMenu.findElement(
By.cssSelector(".dropdown-toggle")
).click();
userMenu.findElement(
By.xpath(".//*[normalize-space()='Profile']")
).click();
driver.findElement(
By.xpath("//div[@id='userMenu']//button[contains(@class,'dropdown-toggle')]")
).click();
Relative XPath can make a locator more specific by connecting the trigger and menu to their parent container.
Bootstrap dropdowns often contain useful attributes such as data-bs-toggle.
driver.findElement(
By.cssSelector("[data-bs-toggle='dropdown']")
).click();
This can be useful when the attribute is unique or sufficiently specific.
| Bootstrap Version | Common Attribute |
|---|---|
| Bootstrap 4 | data-toggle="dropdown" |
| Bootstrap 5 | data-bs-toggle="dropdown" |
The exact application implementation should always be inspected before writing the locator.
<button class="btn dropdown-toggle"
data-toggle="dropdown">
Options
</button>
driver.findElement(
By.cssSelector("[data-toggle='dropdown']")
).click();
<button class="btn dropdown-toggle"
data-bs-toggle="dropdown">
Options
</button>
driver.findElement(
By.cssSelector("[data-bs-toggle='dropdown']")
).click();
List<WebElement> options = driver.findElements(
By.cssSelector(".dropdown-menu .dropdown-item")
);
for (WebElement option : options) {
System.out.println(option.getText());
}
import java.util.List;List<WebElement> options = driver.findElements(
By.cssSelector(".dropdown-menu .dropdown-item")
);
for (WebElement option : options) {
System.out.println("Option: " + option.getText());
}
List<WebElement> options = driver.findElements(
By.cssSelector(".dropdown-menu .dropdown-item")
);
for (WebElement option : options) {
if (option.getText().trim().equals("India")) {
option.click();
break;
}
}
for (WebElement option : options) {
if (option.getText().trim().equalsIgnoreCase("india")) {
option.click();
break;
}
}
Web applications may contain extra whitespace around option text. Using trim() helps normalize the returned text.
String text = option.getText().trim();
if (text.equals("India")) {
option.click();
}
When the displayed text contains dynamic information, partial matching can be useful.
if (option.getText().contains("India")) {
option.click();
}
driver.findElement(By.id("countryDropdown")).click();
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
String selectedText = driver.findElement(
By.id("countryDropdown")
).getText();
System.out.println("Selected: " + selectedText);
import static org.testng.Assert.assertEquals;
String selectedText = driver.findElement(
By.id("countryDropdown")
).getText();
assertEquals(selectedText.trim(), "India");
Dropdown items may contain icons together with text.
<a class="dropdown-item" href="#">
<i class="bi bi-person"></i>
Profile
</a>
driver.findElement(
By.xpath("//a[contains(normalize-space(.),'Profile')]")
).click();
When text is inside child elements, use XPath's text-content behavior carefully.
driver.findElement(
By.xpath("//a[contains(.,'Profile')]")
).click();
A unique attribute is generally easier to maintain than a long XPath.
driver.findElement(
By.cssSelector(".dropdown-item[data-value='india']")
).click();
Bootstrap Dropdowns typically depend on JavaScript to manage visibility and interaction states. Selenium normally does not need to execute the Bootstrap JavaScript directly. It should interact with the page in the same way a user would.
driver.findElement(By.id("dropdownButton")).click();JavaScriptExecutor should not be the first solution for a normal Bootstrap Dropdown. It may be considered only when standard WebDriver interaction cannot interact with a genuinely obstructed or unusual element and the test design supports that approach.
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].click();",
element
);
Normal WebDriver click should be preferred whenever it works correctly.
An ElementClickInterceptedException can occur when another element is blocking the target.
try {
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
} catch (ElementClickInterceptedException e) {
System.out.println("Another element is blocking the option.");
}
This exception may occur when the locator does not identify an element.
try {
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
} catch (NoSuchElementException e) {
System.out.println("Dropdown option was not found.");
}
Dynamic dropdowns may re-render their options. A previously located element can become stale.
try {
option.click();
} catch (StaleElementReferenceException e) {
WebElement refreshedOption = driver.findElement(
By.xpath("//a[normalize-space()='India']")
);
refreshedOption.click();
}
try {
WebElement option = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//a[normalize-space()='India']")
)
);
option.click();
} catch (TimeoutException e) {
System.out.println(
"Dropdown option did not become clickable."
);
}
<nav class="navbar">
<div class="dropdown">
<button class="dropdown-toggle">
Products
</button>
<div class="dropdown-menu">
<a class="dropdown-item">Laptops</a>
<a class="dropdown-item">Mobiles</a>
<a class="dropdown-item">Tablets</a>
</div>
</div>
</nav>
driver.findElement(
By.xpath("//button[normalize-space()='Products']")
).click();
driver.findElement(
By.xpath("//a[normalize-space()='Laptops']")
).click();
driver.findElement(By.id("profileMenu")).click();
driver.findElement(
By.xpath("//a[normalize-space()='My Profile']")
).click();
Action menus commonly contain Edit, Delete, View, Download, and similar options.
driver.findElement(By.id("actionDropdown")).click();
driver.findElement(
By.xpath("//button[normalize-space()='Edit']")
).click();
When every row in a table has its own dropdown, the dropdown should be located relative to the correct row.
WebElement row = driver.findElement(
By.xpath("//tr[.//td[normalize-space()='John']]")
);
row.findElement(
By.cssSelector(".dropdown-toggle")
).click();
row.findElement(
By.xpath(".//*[normalize-space()='Edit']")
).click();
For data tables, locating the correct row first helps prevent Selenium from clicking an option belonging to another row.
WebElement row = driver.findElement(
By.xpath("//tr[td[normalize-space()='1001']]")
);
row.findElement(
By.cssSelector(".dropdown-toggle")
).click();
String customerName = "John";
WebElement row = driver.findElement(
By.xpath("//tr[.//td[normalize-space()='" +
customerName + "']]")
);
row.findElement(
By.cssSelector(".dropdown-toggle")
).click();
row.findElement(
By.xpath(".//*[normalize-space()='View']")
).click();
Some custom implementations may open a menu on hover rather than click. Selenium's Actions class can be used when the application specifically requires hover behavior.
import org.openqa.selenium.interactions.Actions;
WebElement menu = driver.findElement(
By.id("productsMenu")
);
Actions actions = new Actions(driver);
actions.moveToElement(menu).perform();
actions.moveToElement(menu).perform();
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement item = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//a[normalize-space()='Laptops']")
)
);
item.click();
| Behavior | Selenium Approach |
|---|---|
| Click opens menu | click() |
| Hover opens menu | Actions.moveToElement() |
| Dynamic menu | Explicit wait |
| Custom option | Normal WebElement interaction |
If the Bootstrap Dropdown exists inside an iframe, Selenium must switch to that iframe before interacting with the dropdown.
driver.switchTo().frame("paymentFrame");
driver.findElement(
By.id("countryDropdown")
).click();
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
driver.switchTo().defaultContent();
If the dropdown is inside a Shadow DOM, the normal document locator may not directly locate elements inside the shadow root. Selenium's Shadow DOM support should be used according to the application's structure.
WebElement host = driver.findElement(
By.cssSelector("custom-dropdown")
);
SearchContext shadowRoot = host.getShadowRoot();
WebElement option = shadowRoot.findElement(
By.cssSelector(".dropdown-item")
);
option.click();
In the Page Object Model, dropdown locators and interaction methods should be kept inside the relevant page class.
public class ProductPage {
private WebDriver driver;
private By categoryDropdown =
By.id("categoryDropdown");
private By laptopOption =
By.xpath("//a[normalize-space()='Laptops']");
public ProductPage(WebDriver driver) {
this.driver = driver;
}
public void selectCategory() {
driver.findElement(categoryDropdown).click();
driver.findElement(laptopOption).click();
}
}
public void selectBootstrapDropdown(
By dropdown,
By option) {
driver.findElement(dropdown).click();
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.elementToBeClickable(option)
).click();
}
public void selectDropdownByText(
By dropdown,
String text) {
driver.findElement(dropdown).click();
By option = By.xpath(
"//*[normalize-space()='" + text + "']"
);
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.elementToBeClickable(option)
).click();
}
public void selectOption(
By dropdownContainer,
String optionText) {
WebElement container =
driver.findElement(dropdownContainer);
container.findElement(
By.cssSelector(".dropdown-toggle")
).click();
container.findElement(
By.xpath(".//*[normalize-space()='" +
optionText + "']")
).click();
}
driver.findElement(By.id("countryDropdown")).click();
List<WebElement> options = driver.findElements(
By.cssSelector(".dropdown-menu .dropdown-item")
);
for (WebElement option : options) {
System.out.println(option.getText());
}
import org.testng.annotations.Test;
import static org.testng.Assert.assertEquals;
@Test
public void verifyCountryDropdown() {
driver.findElement(
By.id("countryDropdown")
).click();
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
String actual = driver.findElement(
By.id("countryDropdown")
).getText().trim();
assertEquals(actual, "India");
}
WebElement dropdown = driver.findElement(
By.id("countryDropdown")
);
assertTrue(dropdown.isDisplayed());
assertTrue(
driver.findElement(
By.id("countryDropdown")
).isEnabled()
);
driver.findElement(
By.id("countryDropdown")
).click();
List<WebElement> options = driver.findElements(
By.cssSelector(".dropdown-menu .dropdown-item")
);
assertEquals(options.size(), 5);
boolean found = false;
for (WebElement option : options) {
if (option.getText().trim().equals("India")) {
found = true;
break;
}
}
assertTrue(found);
Bootstrap Dropdowns may close when the user clicks outside the menu.
driver.findElement(By.id("countryDropdown")).click();
driver.findElement(By.tagName("body")).click();
For reliable automation, verify the actual application behavior rather than assuming every Bootstrap configuration behaves identically.
Depending on the application, the menu may lose its show class after closing.
WebElement menu = driver.findElement(
By.cssSelector(".dropdown-menu")
);
String classes = menu.getAttribute("class");
System.out.println(classes);
boolean isOpen = driver.findElement(
By.cssSelector(".dropdown-menu")
).getAttribute("class")
.contains("show");
System.out.println("Dropdown open: " + isOpen);
Bootstrap applications may mark options as disabled using a class or HTML attribute.
<a class="dropdown-item disabled"
href="#"
aria-disabled="true">
Delete
</a>
A test should verify that disabled actions cannot be performed through the normal user interface.
WebElement deleteOption = driver.findElement(
By.xpath("//a[normalize-space()='Delete']")
);
boolean disabled = deleteOption
.getAttribute("class")
.contains("disabled");
System.out.println("Disabled: " + disabled);
Bootstrap Dropdowns may use ARIA attributes such as aria-expanded and aria-disabled. These attributes can be useful for verification.
String expanded = driver.findElement(
By.id("dropdownButton")
).getAttribute("aria-expanded");
System.out.println("Expanded: " + expanded);
WebElement button = driver.findElement(
By.id("dropdownButton")
);
button.click();
String expanded = button.getAttribute(
"aria-expanded"
);
assertEquals(expanded, "true");
| Problem | Possible Cause | Solution |
|---|---|---|
| Option not found | Wrong locator | Inspect DOM and update locator |
| Option not clickable | Menu not open | Click trigger and wait |
| Element intercepted | Overlay or another element | Wait for correct state |
| Stale element | DOM re-rendered | Locate element again |
| Wrong option selected | Locator too generic | Use a specific parent/container |
| Timeout | Dynamic content not ready | Use suitable explicit wait |
A common mistake is assuming that every dropdown can be handled with Selenium's Select class.
WebElement element = driver.findElement(
By.id("countryDropdown")
);
Select select = new Select(element);
This works only when the element is a native <select>. For a Bootstrap custom dropdown, use normal WebDriver interaction instead.
Using a generic selector such as .dropdown-item may select the wrong option when multiple dropdowns are present.
Instead, scope the locator to the correct dropdown.
WebElement menu = driver.findElement(
By.id("countryMenu")
);
menu.findElement(
By.xpath(".//*[normalize-space()='India']")
).click();
If options are loaded dynamically, clicking immediately after opening the dropdown may cause intermittent failures.
Use an explicit wait for the option to become visible or clickable.
Using JavaScript for every dropdown interaction can hide real synchronization or locator problems. Normal WebDriver interactions should generally be attempted first.
Absolute XPath expressions are usually fragile because small DOM changes can break them.
/html/body/div[2]/div/div[1]/ul/li[3]/aA relative XPath is generally easier to maintain.
//a[normalize-space()='India']Select class only for native HTML select elements.import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
public class BootstrapDropdownTest {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
try {
driver.manage().window().maximize();
driver.get("https://example.com");
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement dropdown = wait.until(
ExpectedConditions.elementToBeClickable(
By.id("countryDropdown")
)
);
dropdown.click();
WebElement india = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath(
"//a[normalize-space()='India']"
)
)
);
india.click();
String selected = dropdown.getText().trim();
System.out.println(
"Selected Country: " + selected
);
} finally {
driver.quit();
}
}
}
Start Test
|
v
Open Browser
|
v
Navigate to Application
|
v
Locate Bootstrap Dropdown
|
v
Click Dropdown Trigger
|
v
Wait for Dropdown Menu
|
v
Locate Required Option
|
v
Click Option
|
v
Verify Selected Value / Result
|
v
Continue Test
|
v
Close Browser
Suppose an e-commerce application contains a category dropdown with Electronics, Mobiles, Laptops, and Accessories.
driver.findElement(
By.id("categoryDropdown")
).click();
driver.findElement(
By.xpath("//a[normalize-space()='Laptops']")
).click();
The test can then verify that the product listing has changed to the selected category.
driver.findElement(
By.id("accountDropdown")
).click();
driver.findElement(
By.xpath("//a[normalize-space()='My Account']")
).click();
driver.findElement(
By.id("languageDropdown")
).click();
driver.findElement(
By.xpath("//a[normalize-space()='English']")
).click();
WebElement row = driver.findElement(
By.xpath("//tr[.//td[normalize-space()='John']]")
);
row.findElement(
By.cssSelector(".dropdown-toggle")
).click();
row.findElement(
By.xpath(".//*[normalize-space()='Edit']")
).click();
Build an automation test for an e-commerce page containing a Bootstrap category dropdown.
driver.get("https://example.com");
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement category = wait.until(
ExpectedConditions.elementToBeClickable(
By.id("categoryDropdown")
)
);
category.click();
List<WebElement> options = wait.until(
ExpectedConditions.visibilityOfAllElementsLocatedBy(
By.cssSelector(".dropdown-menu .dropdown-item")
)
);
for (WebElement option : options) {
System.out.println(option.getText());
}
for (WebElement option : options) {
if (option.getText().trim().equals("Laptops")) {
option.click();
break;
}
}
A Bootstrap Dropdown is a UI component that displays a menu of options or actions when its trigger is activated. In Selenium, it is commonly handled using normal WebDriver commands because it is usually implemented using buttons, links, lists, or other HTML elements rather than a native <select>.
Only if the dropdown is implemented using a native HTML <select> element. A standard Bootstrap custom dropdown should normally be handled by clicking its trigger and then clicking the required option.
First locate and click the dropdown trigger. Then locate the desired menu item using a stable locator and click it.
driver.findElement(By.id("countryDropdown")).click();
driver.findElement(
By.xpath("//a[normalize-space()='India']")
).click();
Use an explicit wait for the dropdown option to become visible or clickable before interacting with it.
Scope the locator to the appropriate dropdown container or parent row rather than searching the entire page with a generic locator.
You can verify that the dropdown menu is displayed or that its expected state/class, such as show, has been applied. ARIA attributes such as aria-expanded may also provide a useful verification point.
NoSuchElementException can occur when Selenium cannot find the element using the supplied locator. Dynamic applications may also produce timeout or stale-element problems depending on when and how the DOM changes.
| Task | Selenium Approach |
|---|---|
| Open dropdown | click() |
| Select item | Locate item and click() |
| Dynamic item | Explicit wait |
| List all items | findElements() |
| Verify menu | isDisplayed() |
| Verify selected value | getText() |
| Hover menu | Actions.moveToElement() |
| Native select | Select class |
| Bootstrap custom dropdown | WebElement interaction |
Bootstrap Dropdown automation becomes straightforward once the underlying HTML structure is understood. The most important point is to distinguish a Bootstrap custom dropdown from a native HTML <select>. For a custom Bootstrap Dropdown, Selenium normally clicks the trigger, waits for the menu when necessary, locates the desired option, clicks it, and verifies the resulting state.
Stable locators, explicit waits, scoped element searches, reusable Page Object methods, and meaningful assertions help create maintainable Bootstrap Dropdown automation scripts.
For structured Selenium learning, explore the JustAcademy Selenium Training Course.
You can also explore the JustAcademy Free Course Demo Registration to learn more about the training and practical learning experience.
Bootstrap Dropdowns are widely used in modern web applications and are an important component for Selenium automation testing. Unlike native HTML select elements, Bootstrap Dropdowns are generally custom UI components made from buttons, links, lists, divs, JavaScript, and CSS classes.
The correct Selenium approach is therefore to inspect the DOM, identify the dropdown trigger and menu options, use reliable locators, wait for dynamic elements when required, select the desired option, and verify the result. With proper synchronization and locator strategies, Bootstrap Dropdowns can be automated reliably in real-world Selenium WebDriver projects.
