Working with select elements

Select elements can require quite a bit of boiler plate code to automate. To reduce this, and make your tests cleaner, there is a Select class in the Selenium support package. To use it, you will need the following import statement:


import org.openqa.selenium.support.ui.Select;
  

from selenium.webdriver.support.select import Select
  

using OpenQA.Selenium.Support.UI
  

include Selenium::WebDriver::Support
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR  
  

import org.openqa.selenium.support.ui.Select
  

You are then able to create a Select object using a WebElement that references a <select> element.


WebElement selectElement = driver.findElement(By.id("selectElementID"));
Select selectObject = new Select(selectElement);
  

select_element = driver.find_element_by_id('selectElementID')
select_object = Select(select_element)
  

IWebElement selectElement = driver.FindElement(By.Id("selectElementID"));
var selectObject = new SelectElement(selectElement);
  

select_element = driver.find_element(id: 'selectElementID')
select_object = Select(select_element)
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

val selectElement = driver.findElement(By.id("selectElementID"))
val selectObject = new Select(selectElement)
  

The Select object will now give you a series of commands that allow you to interact with a <select> element. First of all, there are different ways of selecting an option from the <select> element.

<select>
 <option value=value1>Bread</option>
 <option value=value2 selected>Milk</option>
 <option value=value3>Cheese</option>
</select>

There are three ways to select the first option from the above element:


// Select an <option> based upon the <select> element's internal index
selectObject.selectByIndex(1);

// Select an <option> based upon its value attribute
selectObject.selectByValue("value1");

// Select an <option> based upon its text
selectObject.selectByVisibleText("Bread");
  

# Select an <option> based upon the <select> element's internal index
select_object.select_by_index(1)

# Select an <option> based upon its value attribute
select_object.select_by_value('value1')

# Select an <option> based upon its text
select_object.select_by_visible_text('Bread')
  

// Select an <option> based upon the <select> element's internal index
selectObject.SelectByIndex(1);

// Select an <option> based upon its value attribute
selectObject.SelectByValue("value1");

// Select an <option> based upon its text
 selectObject.SelectByText("Bread");
  

# Select an <option> based upon the <select> element's internal index
select_object.select_by(:index, 1)

# Select an <option> based upon its value attribute
select_object.select_by(:value, 'value1')

# Select an <option> based upon its text
select_object.select_by(:text, 'Bread')
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

// Select an <option> based upon the <select> element's internal index
selectObject.selectByIndex(1)

// Select an <option> based upon its value attribute
selectObject.selectByValue("value1")

// Select an <option> based upon its text
selectObject.selectByVisibleText("Bread")
  

You can then check which options are selected by using:


// Return a List<WebElement> of options that have been selected
List<WebElement> allSelectedOptions = selectObject.getAllSelectedOptions();

// Return a WebElement referencing the first selection option found by walking down the DOM
WebElement firstSelectedOption = selectObject.getFirstSelectedOption();
  

# Return a list[WebElement] of options that have been selected
all_selected_options = select_object.all_selected_options

# Return a WebElement referencing the first selection option found by walking down the DOM
first_selected_option = select_object.first_selected_option
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

# Return an Array[Element] of options that have been selected
all_selected_options = select_object.selected_options

# Return a WebElement referencing the first selection option found by walking down the DOM
first_selected_option = select_object.first_selected_option
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

// Return a List<WebElement> of options that have been selected
val allSelectedOptions = selectObject.allSelectedOptions

// Return a WebElement referencing the first selection option found by walking down the DOM
val firstSelectedOption = selectObject.firstSelectedOption
  

Or you may just be interested in what <option> elements the <select> element contains:


// Return a List<WebElement> of options that the <select> element contains
List<WebElement> allAvailableOptions = selectObject.getOptions();
  

# Return a list[WebElement] of options that the &lt;select&gt; element contains
all_available_options = select_object.options
  

// Return a IList<IWebElement> of options that the <select> element contains
IList<IWebElement> allAvailableOptions = selectObject.Options;
  

# Return an Array[Element] of options that the &lt;select&gt; element contains
all_available_options = select_object.options
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

// Return a List<WebElement> of options that the <select> element contains
val allAvailableOptions = selectObject.options
  

If you want to deselect any elements, you now have four options:


// Deselect an <option> based upon the <select> element's internal index
selectObject.deselectByIndex(1);

// Deselect an <option> based upon its value attribute
selectObject.deselectByValue("value1");

// Deselect an <option> based upon its text
selectObject.deselectByVisibleText("Bread");

// Deselect all selected <option> elements
selectObject.deselectAll();
  

# Deselect an <option> based upon the <select> element's internal index
select_object.deselect_by_index(1)

# Deselect an <option> based upon its value attribute
select_object.deselect_by_value('value1')

# Deselect an <option> based upon its text
select_object.deselect_by_visible_text('Bread')

# Deselect all selected <option> elements
select_object.deselect_all()
  

// Deselect an <option> based upon the <select> element's internal index
selectObject.DeselectByIndex(1);

// Deselect an <option> based upon its value attribute
selectObject.DeselectByValue("value1");

// Deselect an <option> based upon its text
selectObject.DeselectByText("Bread");

// Deselect all selected <option> elements
selectObject.DeselectAll();
  

# Deselect an <option> based upon the <select> element's internal index
select_object.deselect_by(:index, 1)

# Deselect an <option> based upon its value attribute
select_object.deselect_by(:value, 'value1')

# Deselect an <option> based upon its text
select_object.deselect_by(:text, 'Bread')

# Deselect all selected <option> elements
select_object.deselect_all
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

// Deselect an <option> based upon the <select> element's internal index
selectObject.deselectByIndex(1)

// Deselect an <option> based upon its value attribute
selectObject.deselectByValue("value1")

// Deselect an <option> based upon its text
selectObject.deselectByVisibleText("Bread")

// Deselect all selected <option> elements
selectObject.deselectAll()
  

Finally, some <select> elements allow you to select more than one option. You can find out if your <select> element is one of these by using:


Boolean doesThisAllowMultipleSelections = selectObject.isMultiple();
  

does_this_allow_multiple_selections = select_object.is_multiple
  

bool doesThisAllowMultipleSelections = selectObject.IsMultiple;
  

does_this_allow_multiple_selections = select_object.multiple?
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

val doesThisAllowMultipleSelections = selectObject.isMultiple