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
// Return a List<WebElement> of options that have been selected
var allSelectedOptions = selectObject.AllSelectedOptions;
// Return a WebElement referencing the first selection option found by walking down the DOM
var firstSelectedOption = selectObject.AllSelectedOptions.FirstOrDefault();
# 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 <select> 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 <select> 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