selenium:dropdown-select

Dropdown tests can pass the wrong state when the script only clicks the menu and never proves which option the browser selected. Selenium provides a Select helper for native HTML <select> controls so the test can change the option and verify the selected text, selected value, or page reaction from the same run.

The helper wraps the actual <select> element after the normal locator step. In Python, select_by_visible_text() matches the label shown to the user, while select_by_value() matches the option's value attribute when that attribute is the stable contract for the page.

The smoke test uses Python with a headless Chrome or Chromium session and a local HTML test page. Custom JavaScript dropdowns built from <div>, <button>, <ul>, or <li> elements are not native select lists, so automate those controls with ordinary locators, waits, and clicks instead of the Select helper.

Confirm that the target control is a native HTML <select> element.

Select works with <select> and <option> elements. If the visible menu is a custom widget, locate and click the widget's own controls instead.

Create select_dropdown.py with a headless browser session and a native dropdown test page.

select_dropdown.py

import shutil
from urllib.parse import quote
 
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import Select
 
 
html = """<!doctype html>
<html lang="en">
  <body>
    <label for="plan">Plan</label>
    <select id="plan" name="plan">
      <option value="">Choose a plan</option>
      <option value="starter">Starter</option>
      <option value="team">Team</option>
      <option value="enterprise">Enterprise</option>
    </select>
    <p id="result"></p>
    <script>
      document.querySelector("#plan").addEventListener("change", (event) => {
        document.querySelector("#result").textContent = event.target.value;
      });
    </script>
  </body>
</html>"""
 
 
options = Options()
options.add_argument("--headless=new")
options.add_argument("--window-size=1280,720")
 
for browser_name in ("google-chrome", "chromium", "chromium-browser"):
    browser_path = shutil.which(browser_name)
    if browser_path:
        options.binary_location = browser_path
        break
 
driver_path = shutil.which("chromedriver")
service = Service(driver_path) if driver_path else None
 
driver = webdriver.Chrome(service=service, options=options)
 
try:
    driver.get("data:text/html;charset=utf-8," + quote(html))
 
    menu = Select(driver.find_element(By.ID, "plan"))
    menu.select_by_visible_text("Team")
 
    selected = menu.first_selected_option
    selected_text = selected.text
    selected_value = selected.get_attribute("value")
    change_event_value = driver.find_element(By.ID, "result").text
 
    assert selected_text == "Team"
    assert selected_value == "team"
    assert change_event_value == "team"
 
    print(f"selected_text: {selected_text}")
    print(f"selected_value: {selected_value}")
    print(f"change_event_value: {change_event_value}")
finally:
    driver.quit()

Replace the data URL, locator, and option text with the real page values after the smoke test works. Use select_by_value() when the option's value attribute is less likely to change than the visible label.

Run the script to select the Team option and verify the browser state.

$ python3 select_dropdown.py
selected_text: Team
selected_value: team
change_event_value: team

Add an explicit wait before wrapping a menu that is inserted or populated after page load.

Wait for the <select> element or target <option> before calling Select(…), otherwise the script can fail before the dropdown exists.
Related: How to use explicit waits in Selenium
Remove the temporary smoke-test script after the selection block is moved into the real test.
```
$ rm select_dropdown.py
```
Keep an assertion on selected text, selected value, or visible page output so the test fails when the option does not actually change.

How to select a dropdown option with Selenium

Steps to select a Selenium dropdown option: