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?
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
Luis Perez 5 years ago
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`.