selenium-同选择元素一起工作

开源项目
,
1

title: “同选择元素一起工作”
weight: 3

选择元素可能需要大量样板代码才能自动化.
为了减少这种情况并使您的测试更干净, 在Selenium的support包中有一个
Select 类.
要使用它，您将需要以下导入语句:

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

然后，您能够参考 <select> 元素，基于WebElement创建一个Select对象。

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

Select对象现在将为您提供一系列命令，使您可以与 <select> 元素进行交互.
首先，有多种方法可以从 <select> 元素中选择一个选项.

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

有三种方法可以从上述元素中选择第一个选项:

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

然后，您可以检视所有被选择的选项:

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

或者您可能只对 <select> 元素包含哪些 <option> 元素感兴趣:

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

如果要取消选择任何元素，现在有四个选项:

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

最后，一些 <select> 元素允许您选择多个选项.
您可以通过使用以下命令确定您的 <select> 元素是否允许多选:

{{< 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/zh-cn/support_packages/working_with_select_elements