How do I work with dropdowns in Selenium Webdriver?

  • This is a canonical question, intended to provide a comprehensive answer to many related questions.

    I understand the basics of working with Selenium Webdriver; I can navigate to pages, click buttons, and type into text boxes. But now I want to do things with dropdown boxes (also known as "Select" boxes).

    How can I perform common tasks like iterating over the options in the dropdown or selecting options from the dropdown?

  • Yamikuronue

    Yamikuronue Correct answer

    6 years ago

    Using the Select Utility Class

    The big secret to working with dropdowns is that you don't want to work with them as WebElements, but instead create a Select element for them. The Select class (java and python documentation) includes utility methods that allow you to perform common tasks. We will be working with the following html:

    <select id="mySelectID">
        <option value="Value">Option</option>
        <option value="NotValue">Not Option</option>
    </select>
    

    Select by option name

    Java:

    WebElement mySelectElm = driver.findElement(By.id("mySelectID")); 
    Select mySelect= new Select(mySelectElm);
    selMySelect.selectByVisibleText("Option");
    

    Python:

    mySelect = Select(driver.find_element_by_id("mySelectID"))
    mySelect.select_by_visible_text("Option")
    

    C#:

    var mySelectElm = driver.FindElement(By.Id("mySelectID"));
    var mySelect = new SelectElement(mySelectElm);
    selectElement.SelectByText("Option");
    

    Select by option value

    Java:

    WebElement mySelectElm = driver.findElement(By.id("mySelectID")); 
    Select mySelect= new Select(mySelectElm);
    selMySelect.selectByValue("Value");
    

    Python:

    mySelect = Select(driver.find_element_by_id("mySelectID"))
    mySelect.select_by_value("Value")
    

    C#:

    var mySelectElm = driver.FindElement(By.Id("mySelectID"));
    var mySelect = new SelectElement(mySelectElm);
    selectElement.SelectByValue("Value");
    

    Select by index

    Java:

    WebElement mySelectElm = driver.findElement(By.id("mySelectID")); 
    Select mySelect= new Select(mySelectElm);
    selMySelect.selectByIndex(0);
    

    Python:

    mySelect = Select(driver.find_element_by_id("mySelectID"))
    mySelect.select_by_index(0)
    

    C#:

    var mySelectElm = driver.FindElement(By.Id("mySelectID"));
    var mySelect = new SelectElement(mySelectElm);
    selectElement.SelectByIndex(0);
    

    Get the selected option

    Java:

    WebElement mySelectElm = driver.findElement(By.id("mySelectID")); 
    Select mySelect= new Select(mySelectElm);
    WebElement option = mySelect.getFirstSelectedOption();
    System.out.println(option.getText()); //prints "Option"
    

    Python:

    mySelect = Select(driver.find_element_by_id("mySelectID"))
    option = mySelect.first_selected_option
    print option.text  #prints "Option"
    

    C#:

    var mySelectElm = driver.FindElement(By.Id("mySelectID"));
    var mySelect = new SelectElement(mySelectElm);
    var option = mySelect.SelectedOption;
    Console.write(option.Text); //prints "Option"
    

    Get the list of options

    Java:

    WebElement mySelectElm = driver.findElement(By.id("mySelectID")); 
    Select mySelect= new Select(mySelectElm);
    List<WebElement> options = mySelect.getOptions();
    for (WebElement option : options) {
        System.out.println(option.getText()); //Prints "Option", followed by "Not Option"
    }
    

    Python:

    mySelect = Select(driver.find_element_by_id("mySelectID"))
    print [o.text for o in mySelect.options] #Prints "Option", followed by "Not Option"
    

    C#:

    var mySelectElm = driver.FindElement(By.Id("mySelectID"));
    var mySelect = new SelectElement(mySelectElm);
    var options = mySelect.SelectedOptions;
    foreach(var option in options) {
        Console.write(option.Text); //Prints "Option", followed by "Not Option"
    }
    

    Note that in C# the `SelectElement` class is part of the `Selenium.Support` project. So you have to make sure you have that instead in addition to `Selenium.WebDriver`.

    Can I do multiple upvotes for this answer? Awesome answer!

  • Without the Select class

    Everything I listed in my other answer can, of course, be done with judicious use of selectors. Since the Select class doesn't exist in Ruby (to the best of my knowledge), this is the only way to work with Select options in Ruby.

    Again, the HTML:

    <select id="mySelectID">
        <option value="Value">Option</option>
        <option value="NotValue">Not Option</option>
    </select>
    

    Select by option name

    Java, method 1:

    In this example, we find the option via a complex xpath, then click on it:

    WebElement myoption = driver.findElement(By.xpath(
        "//Select[@id='mySelectID']/option[normalize-space(text())='Option']")
    );
     myOption.click();
    

    Java, method 2:

    In this example, we find all the options, iterate over them, and click the one we want. This is useful if you have a more complex criteria.

    WebElement mySelectElm = driver.findElement(By.id("mySelectID")); 
    Select mySelect= new Select(mySelect);
    List<WebElement> options = mySelect.getOptions();
    for (WebElement option : options) {
        if (option.getText().equalsIgnoreCase("Option") {
            option.click();
        }
    }
    

    Ruby, method 2:

    Same method as the previous answer, different language:

    mySelect=webdriver.find_element(:id,"mySelectID")
    options=mySelect.find_elements(:tag_name=>"option")
    options.each do |g|
      if g.text == "Option"
      g.click
      break
      end
    end
    

    Ruby, method 3:

    Here we get fancy, using a closure to find the right option instead of a loop:

    mySelect = webdriver.find_element(:id,"mySelectID")
    option = dropdown.find_elements(:tag_name,"option").detect { |option| option.attribute('text').eql? "Option"}
    option.click
    

    Select by option value

    Same basic idea, but we can use CSS to select an option by value instead of mucking about with xpath:

    Java

    WebElement myoption = driver.findElement(By.cssSelector("#mySelectID option[value='Value']"));
    myOption.click();
    

    Ruby

    mySelect = webdriver.find_element(:id,"mySelectID")
    option = mySelect.find_element(:css, "option[value='Value']")
    option.click
    

    Select by index

    Again, easy to do with css selectors:

    Java

    WebElement myoption = driver.findElement(By.cssSelector("#mySelectID option:nth-child(1)"));
    myOption.click();
    

    Ruby

    mySelect = webdriver.find_element(:id,"mySelectID")
    option = mySelect.find_element(:css, "option:nth-child(1)")
    option.click
    

    Get the selected option

    Hooray for CSS selectors! For legacy reasons, the selector for "selected" is "checked", like a checkbox:

    Java:

    WebElement myoption = driver.findElement(By.cssSelector("#mySelectID option:checked"));
    System.out.println(myoption.getText()); //prints "Option"
    

    Ruby

    mySelect = webdriver.find_element(:id,"mySelectID")
    option = mySelect.find_element(:css, "option:nth-child(1)")
    print option.text
    

    Get the list of options

    Java:

    List<WebElement> options = driver.findElements(By.cssSelector("#mySelectID option"));
    for (WebElement option : options) {
        System.out.println(option.getText()); //Prints "Option", followed by "Not Option"
    }
    

    Ruby:

    mySelect=webdriver.find_element(:id,"mySelectID")
    options=mySelect.find_elements(:tag_name=>"option")
    options.each do |g|
      print g.text #Prints "Option", followed by "Not Option"
    end
    
  • You can use following methods to handle drop down in selenium.

     1. driver.selectByVisibleText("Text");
     2. driver.selectByIndex(1);
     3. driver.selectByValue("prog");
    

    For more details, you can refer this post. It will definitely help you a lot in resolving your queries.

  • 1) SelectByIndex

    Select select = new Select(driver.findElement(By.id("mobile-operator"))); select.selectByValue(index of the record you want to select );

    2) SelectByValue

    Select select = new Select(driver.findElement(By.id("mobile-operator")));
    select.selectByValue(value of the record you want to select );
    

    3) SelectByVisibleText

    Select select = new Select(driver.findElement(By.id("mobile-operator"))); /n
    select.selectByValue(visible text of the record you want to select );
    
  • There is a horrible bug where selecting an option is not triggering in firefox or phantomjs versions of selenium. I got select working with the following, maybe it will help someone else:

    from selenium.webdriver.support.ui import Select
    
    def trigger_event(driver, id_, event):
        js = '''
        var event = new Event("%s");
        element = document.getElementById("%s")
        element.dispatchEvent(event);
        return true;
        ''' % (event, id_)
    
        assert driver.execute_script(js)
    
    select_id = "SELECT_ID"
    select = driver.find_element_by_id(select_id)
    Select(select).select_by_visible_text("SELECT_TEXT")
    trigger_event(driver, select_id, "input")
    
  • Ruby - Use the capybara gem

    http://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Actions#select-instance_method

    It gives all the goodies of other implementations in the wonderful terse and clear ruby way:

    select('Option', from: 'Select Box')
    

    e.g.

    select('November', from 'driver-license-expire-month')
    

    where the html has <select id='driver-license-month'>...<option value='November'>November</option>...

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM