selenium-Working with select elements

hogwarts · 2020 年11 月 12 日 08:20

title: “Working with select elements”
weight: 3

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:

{{< code-tab >}}
{{< code-panel language=“java” >}}
import org.openqa.selenium.support.ui.Select;
{{< / code-panel >}}
{{< code-panel language=“python” >}}
from selenium.webdriver.support.select import Select
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
using OpenQA.Selenium.Support.UI
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}
include Selenium::WebDriver::Support
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
import org.openqa.selenium.support.ui.Select
{{< / code-panel >}}
{{< / code-tab >}}

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

{{< code-tab >}}
{{< code-panel language=“java” >}}
WebElement selectElement = driver.findElement(By.id(“selectElementID”));
Select selectObject = new Select(selectElement);
{{< / code-panel >}}
{{< code-panel language=“python” >}}
select_element = driver.find_element(By.ID,‘selectElementID’)
select_object = Select(select_element)
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
IWebElement selectElement = driver.FindElement(By.Id(“selectElementID”));
var selectObject = new SelectElement(selectElement);
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}
select_element = driver.find_element(id: ‘selectElementID’)
select_object = Select(select_element)
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
val selectElement = driver.findElement(By.id(“selectElementID”))
val selectObject = new Select(selectElement)
{{< / code-panel >}}
{{< / code-tab >}}

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:

{{< code-tab >}}
{{< code-panel language=“java” >}}
// Select an based upon the element’s internal index
selectObject.selectByIndex(1);

// Select an based upon its value attribute
selectObject.selectByValue(“value1”);

// Select an based upon its text
selectObject.selectByVisibleText(“Bread”);
{{< / code-panel >}}
{{< code-panel language=“python” >}}

Select an based upon the element’s internal index

select_object.select_by_index(1)

Select an based upon its value attribute

select_object.select_by_value(‘value1’)

Select an based upon its text

select_object.select_by_visible_text(‘Bread’)
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
// Select an based upon the element’s internal index
selectObject.SelectByIndex(1);

// Select an based upon its value attribute
selectObject.SelectByValue(“value1”);

// Select an based upon its text
selectObject.SelectByText(“Bread”);
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}

Select an based upon the element’s internal index

select_object.select_by(:index, 1)

Select an based upon its value attribute

select_object.select_by(:value, ‘value1’)

Select an based upon its text

select_object.select_by(:text, ‘Bread’)
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
// Select an based upon the element’s internal index
selectObject.selectByIndex(1)

// Select an based upon its value attribute
selectObject.selectByValue(“value1”)

// Select an based upon its text
selectObject.selectByVisibleText(“Bread”)
{{< / code-panel >}}
{{< / code-tab >}}

You can then check which options are selected by using:

{{< code-tab >}}
{{< code-panel language=“java” >}}
// Return a List of options that have been selected
List allSelectedOptions = selectObject.getAllSelectedOptions();

// Return a WebElement referencing the first selection option found by walking down the DOM
WebElement firstSelectedOption = selectObject.getFirstSelectedOption();
{{< / code-panel >}}
{{< code-panel language=“python” >}}

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
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
// Return a List 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();
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}

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
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
// Return a List 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
{{< / code-panel >}}
{{< / code-tab >}}

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

{{< code-tab >}}
{{< code-panel language=“java” >}}
// Return a List of options that the element contains
List allAvailableOptions = selectObject.getOptions();
{{< / code-panel >}}
{{< code-panel language=“python” >}}

Return a list[WebElement] of options that the <select> element contains

all_available_options = select_object.options
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
// Return a IList of options that the element contains
IList allAvailableOptions = selectObject.Options;
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}

Return an Array[Element] of options that the <select> element contains

all_available_options = select_object.options
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
// Return a List of options that the element contains
val allAvailableOptions = selectObject.options
{{< / code-panel >}}
{{< / code-tab >}}

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

{{< code-tab >}}
{{< code-panel language=“java” >}}
// Deselect an based upon the element’s internal index
selectObject.deselectByIndex(1);

// Deselect an based upon its value attribute
selectObject.deselectByValue(“value1”);

// Deselect an based upon its text
selectObject.deselectByVisibleText(“Bread”);

// Deselect all selected elements
selectObject.deselectAll();
{{< / code-panel >}}
{{< code-panel language=“python” >}}

Deselect an based upon the element’s internal index

select_object.deselect_by_index(1)

Deselect an based upon its value attribute

select_object.deselect_by_value(‘value1’)

Deselect an based upon its text

select_object.deselect_by_visible_text(‘Bread’)

Deselect all selected elements

select_object.deselect_all()
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
// Deselect an based upon the element’s internal index
selectObject.DeselectByIndex(1);

// Deselect an based upon its value attribute
selectObject.DeselectByValue(“value1”);

// Deselect an based upon its text
selectObject.DeselectByText(“Bread”);

// Deselect all selected elements
selectObject.DeselectAll();
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}

Deselect an based upon the element’s internal index

select_object.deselect_by(:index, 1)

Deselect an based upon its value attribute

select_object.deselect_by(:value, ‘value1’)

Deselect an based upon its text

select_object.deselect_by(:text, ‘Bread’)

Deselect all selected elements

select_object.deselect_all
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
// Deselect an based upon the element’s internal index
selectObject.deselectByIndex(1)

// Deselect an based upon its value attribute
selectObject.deselectByValue(“value1”)

// Deselect an based upon its text
selectObject.deselectByVisibleText(“Bread”)

// Deselect all selected elements
selectObject.deselectAll()
{{< / code-panel >}}
{{< / code-tab >}}

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:

{{< code-tab >}}
{{< code-panel language=“java” >}}
Boolean doesThisAllowMultipleSelections = selectObject.isMultiple();
{{< / code-panel >}}
{{< code-panel language=“python” >}}
does_this_allow_multiple_selections = select_object.is_multiple
{{< / code-panel >}}
{{< code-panel language=“csharp” >}}
bool doesThisAllowMultipleSelections = selectObject.IsMultiple;
{{< / code-panel >}}
{{< code-panel language=“ruby” >}}
does_this_allow_multiple_selections = select_object.multiple?
{{< / code-panel >}}
{{< code-panel language=“javascript” >}}
// This feature is not implemented - Help us by sending a pr to implement this feature
{{< / code-panel >}}
{{< code-panel language=“kotlin” >}}
val doesThisAllowMultipleSelections = selectObject.isMultiple
{{< / code-panel >}}
{{< / code-tab >}}

官方链接为：https://www.selenium.dev/documentation/en/support_packages/working_with_select_elements

selenium-Working with select elements

title: “Working with select elements” weight: 3

Select an based upon the element’s internal index

Select an based upon its value attribute

Select an based upon its text

Select an based upon the element’s internal index

Select an based upon its value attribute

Select an based upon its text

Return a list[WebElement] of options that have been selected

Return a WebElement referencing the first selection option found by walking down the DOM

Return an Array[Element] of options that have been selected

Return a WebElement referencing the first selection option found by walking down the DOM

Return a list[WebElement] of options that the <select> element contains

Return an Array[Element] of options that the <select> element contains

Deselect an based upon the element’s internal index

Deselect an based upon its value attribute

Deselect an based upon its text

Deselect all selected elements

Deselect an based upon the element’s internal index

Deselect an based upon its value attribute

Deselect an based upon its text

Deselect all selected elements

title: “Working with select elements”
weight: 3