How do I work with dropdowns in Selenium Webdriver?

Question

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?

Answer 1

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"
}

Answer 2

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

Answer 3

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.

Answer 4

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")

Answer 5

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 );

Answer 6

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>...