Introduction

A Bootstrap Dropdown is a custom dropdown component created using HTML, CSS, and JavaScript frameworks such as Bootstrap. Unlike HTML <select> elements, Bootstrap Dropdowns are not handled using Selenium’s Select class. Instead, they behave like normal web elements and are automated using Selenium’s click() method.

Typically, a Bootstrap Dropdown consists of:

A toggle button that displays the available options.
A dropdown menu containing multiple selectable items.
JavaScript that controls when the menu appears or disappears.

In Selenium, Bootstrap Dropdowns are automated by first clicking the dropdown toggle button and then clicking the desired option from the displayed menu.

In this tutorial, you’ll learn how to handle Bootstrap Dropdowns using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What is a Bootstrap Dropdown?

A Bootstrap Dropdown is a custom-built dropdown component that allows users to select options from a dynamically displayed menu.

Common examples include:

User Profile Menus
Navigation Menus
Product Filters
Settings Menus
Account Selection Menus
Action Lists

Example HTML:

<div class="dropdown">
    <button class="dropdown-toggle">
        Menu
    </button>

    <ul class="dropdown-menu">
        <li>Option A</li>
        <li>Option B</li>
    </ul>
</div>

Since Bootstrap Dropdowns are not native HTML <select> elements, Selenium’s Select class cannot be used to automate them.

Why Automate Bootstrap Dropdowns?

Automating Bootstrap Dropdowns helps you:

Validate menu functionality.
Verify user selections.
Test dynamic UI behavior.
Improve automation coverage.
Reduce manual testing effort.

Common Methods Used

Method	Purpose
click()	Opens the dropdown and selects options
find_element()	Locates the dropdown elements
is_displayed()	Verifies whether an element is visible
is_enabled()	Verifies whether an element is enabled
execute_script()	Creates or interacts with dynamic JavaScript elements when required

Example

The following example creates a Bootstrap Dropdown dynamically using JavaScript, opens the dropdown menu, selects Option A, and verifies that the selected option is displayed successfully.

from selenium import webdriver
from selenium.webdriver.common.by import By


# Topic: 26. Dropdown Handling - Bootstrap Dropdown
# Practice site: https://www.testmuai.com/selenium-playground/
# Run: pytest -s 26_examples/test_03_bootstrap_dropdown.py
#
# Bootstrap dropdowns are not native select elements. Click the toggle button
# first, then click the desired menu item.


def test_bootstrap_dropdown():
    driver = webdriver.Chrome()

    try:
        driver.get("https://www.testmuai.com/selenium-playground/")

        driver.execute_script(
            """
            const wrapper = document.createElement('div');
            wrapper.className = 'dropdown';
            wrapper.style.margin = '20px';
            wrapper.innerHTML = `
                <button id="dropdown-toggle"
                        class="btn btn-primary dropdown-toggle"
                        data-bs-toggle="dropdown">
                        Menu
                </button>

                <ul class="dropdown-menu" id="dropdown-menu">
                    <li>
                        <a class="dropdown-item"
                           href="#"
                           id="option-a">
                           Option A
                        </a>
                    </li>

                    <li>
                        <a class="dropdown-item"
                           href="#"
                           id="option-b">
                           Option B
                        </a>
                    </li>
                </ul>
            `;

            document.body.prepend(wrapper);
            """
        )

        driver.find_element(
            By.ID,
            "dropdown-toggle"
        ).click()

        driver.find_element(
            By.ID,
            "option-a"
        ).click()

        assert driver.find_element(
            By.ID,
            "option-a"
        ).is_displayed()

    finally:
        driver.quit()

Output

Option A

The Bootstrap Dropdown opens successfully, and Selenium selects Option A from the available menu items.

Understanding the Code

Import the Required Classes

from selenium import webdriver
from selenium.webdriver.common.by import By

Imports:

webdriver for launching and controlling the browser.
By for locating web elements.

Create the WebDriver

driver = webdriver.Chrome()

Launches a new Chrome browser session.

Open the Practice Website

driver.get(
    "https://www.testmuai.com/selenium-playground/"
)

Opens the practice webpage where the Bootstrap Dropdown will be created dynamically.

Create the Bootstrap Dropdown

driver.execute_script(
    """
    JavaScript Code
    """
)

The execute_script() method creates the entire Bootstrap Dropdown using JavaScript.

This includes:

The dropdown toggle button.
The dropdown menu.
Two selectable menu options.

This approach is particularly useful when testing dynamically generated elements.

Open the Dropdown Menu

driver.find_element(
    By.ID,
    "dropdown-toggle"
).click()

Selenium clicks the dropdown toggle button to display the available menu options.

This behaves exactly like a real user clicking a Bootstrap Dropdown.

Select an Option

driver.find_element(
    By.ID,
    "option-a"
).click()

Once the menu becomes visible, Selenium clicks the desired option.

In this example:

Option A

is selected successfully.

Verify the Selected Option

assert driver.find_element(
    By.ID,
    "option-a"
).is_displayed()

The is_displayed() method verifies that the selected option exists and is visible on the webpage.

Close the Browser

driver.quit()

Closes the browser and ends the WebDriver session.

This is a recommended practice to ensure that all browser instances are properly terminated after test execution.

Locating Bootstrap Dropdown Options

Bootstrap Dropdown options are usually located using:

By.ID

or:

By.CSS_SELECTOR

Examples:

driver.find_element(
    By.CSS_SELECTOR,
    ".dropdown-item"
)

and:

driver.find_element(
    By.ID,
    "option-a"
)

Using stable locators significantly improves automation reliability.

Practical Example

Suppose an e-commerce website provides a Product Category Bootstrap Dropdown.

The automation script:

Opens the Categories menu.
Selects Electronics.
Verifies that the correct products are displayed.

This validates both the dropdown functionality and the application’s business workflow.

Automation Testing Example

Consider an online banking application.

The dashboard contains a Profile menu that allows users to:

View Account Details.
Change Password.
Download Statements.
Logout.

The automation script:

Opens the Profile menu.
Selects Download Statements.
Verifies that the statement page opens successfully.

Bootstrap Dropdowns are frequently used in modern enterprise web applications because of their flexibility and attractive UI design.

Real-World Example

Bootstrap Dropdowns are commonly used in:

Banking applications
E-commerce websites
CRM systems
Healthcare portals
HR management systems
Government websites
Enterprise web applications

They are particularly useful for navigation menus, action lists, and dynamic user interfaces.

Advantages of Automating Bootstrap Dropdowns

Simulates real user interactions.
Supports dynamic web applications.
Improves automation coverage.
Validates business workflows.
Reduces manual testing effort.

Common Mistakes Beginners Make

Using the Select Class

Many beginners try:

Select()

for Bootstrap Dropdowns.

This does not work because Bootstrap Dropdowns are not HTML <select> elements.

Instead, use:

click()

to interact with the toggle button and menu items.

Forgetting to Open the Dropdown

Attempting to click an option before opening the menu may cause Selenium to throw exceptions.

Always click the dropdown toggle button first.

Using Incorrect Locators

Always prefer stable locators such as:

ID
CSS Selector
Name

Avoid fragile XPath expressions whenever possible.

Ignoring Synchronization

Some Bootstrap Dropdowns are loaded dynamically using JavaScript or API calls.

Use Explicit Wait whenever necessary before interacting with them.

Best Practices

Do not use the Select class for Bootstrap Dropdowns.
Always click the toggle button before selecting an option.
Prefer stable locators such as ID and CSS Selector.
Use Explicit Wait for dynamically loaded menus.
Verify that the selected option is visible after selection.
Use reliable synchronization techniques for dynamic applications.

Conclusion

Bootstrap Dropdowns are custom UI components that provide greater flexibility than traditional HTML Select Dropdowns. Since they are not native <select> elements, Selenium handles them using standard web element interactions such as click(). Following best practices such as using stable locators and proper synchronization helps create robust and maintainable Selenium automation scripts.

Frequently Asked Questions (FAQs)

Can I use the Select class for Bootstrap Dropdowns?

No.

Bootstrap Dropdowns are not HTML <select> elements.

Use:

click()

instead.

How do I select an option from a Bootstrap Dropdown?

Perform two steps:

Click the dropdown toggle button.
Click the desired menu option.

Which locators are preferred?

The preferred locators are:

ID
CSS Selector
Name

Are Bootstrap Dropdowns commonly used in Selenium automation?

Yes.

They are widely used in navigation menus, filters, profile menus, and enterprise web applications.

Can Bootstrap Dropdowns load dynamically?

Yes.

Many Bootstrap Dropdowns are rendered using JavaScript and may require Explicit Wait before interaction.

Key Takeaways

Bootstrap Dropdowns are custom UI components and are not HTML <select> elements.
Selenium uses click() to open the menu and select options.
Do not use the Select class for Bootstrap Dropdowns.
Prefer stable locators such as ID and CSS Selector.
Use Explicit Wait for dynamically loaded dropdowns.
Validate selected options after interaction.
Proper synchronization and locator selection improve automation reliability.