Selenium 简明教程

Selenium WebDriver - Dropdown Box

Selenium WebDriver 可用于使用 Select 类的帮助来处理网页上的下拉框。一个网页上可能有两种类型的下拉框 - 单选（选择一个选项）和多选（选择多个选项）。在 HTML 术语中，每个下拉框都由标签名 select 识别。此外，它的每个选项都使用标签名 option 识别。此外，对于多选下拉框，有一个与 select 标签名一起出现的属性 multiple。

Selenium Webdriver can be used to work on dropdown boxes on a web page with the help of the Select class. There can be two varieties of dropdown on a web page - single select (selection of one option) and multiple select (selection more than one option). In HTML terminology, every dropdown is identified by the tagname called select. Also, each of its options are identified with the tagname called the option. Moreover, for a multiselect drop down, there is an attribute known as multiple, along with the select tagname.

Identify Dropdown in HTML

在浏览器（例如 Chrome）中右键单击网页，然后单击“检查”按钮。然后，网页的所有 HTML 代码都将显示出来。要研究网页上的单选下拉框，请单击 HTML 代码顶部处的左上角，如下图中突出显示所示。

Right click on the web page in a browser, say Chrome, and click on the Inspect button. Then, all HTML code for the page would be visible. For investigating a single select dropdown on a web page, click on the left upward arrow at top of the HTML code as highlighted in the image below.

一旦我们单击箭头并将箭头指向文本 Select One 旁边的下拉框，它的 HTML 代码便可见，反映了 select 标签名（<> 中包含）及其在 option 标签名中的选项。

Once, we had clicked and pointed the arrow to the dropdown beside the text Select One, its HTML code was visible, reflecting the select tagname(enclosed in <>), and its options within the option tagname.

此处，选项 Pick one title 具有所选属性，反映了它是默认选定的事实。

Here, the option Pick one title has the attribute selected, reflecting the fact that it is selected by default.

Basic Select Class Methods in Selenium Webdriver

Selenium WebDriver 中有许多 Select 类的方法。它们在下面列出 −

There are multiple Select class methods in Selenium Webdriver. They are listed below −

getOptions()

返回下拉框中所有选项的列表。

Returns the list of all options in the dropdown.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath"))
Select s = new Select(e);
List<WebElement> l = s.getOptions();

getFirstSelectedOption()

返回下拉框中选定的选项。如果选择了多个选项，则只返回第一项。

Returns the selected option in the dropdown. If there are multi options selected, only the first item shall be returned.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
l = s. getFirstSelectedOption();

isMultiple()

返回布尔值，如果下拉框允许选择多个项目，则产生 true 值。

Returns a boolean value, yields a true value if the dropdown allows selection of multiple items.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
boolean l = s.isMultiple();

selectByIndex()

下拉列表中要选择的选项的索引作为参数传递。索引从 0 开始。

The index of the option to be selected by the dropdown is passed as a parameter. The index starts from 0.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.selectByIndex(0);

selectByValue()

下拉列表中要选择的选项的 value 属性作为参数传递。下拉列表中的选项应具有 value 属性，才能使用此方法。

The value attribute of the option to be selected by the dropdown is passed as a parameter. The options in the dropdown should have the value attribute so that this method can be used.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.selectByValue("option 1");

selectByVisibleText()

下拉列表中要选择的选项的可见文本作为参数传递。

The visible text of the option to be selected by the dropdown is passed as a parameter.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.selectByVisibleText("Selenium");

deselectByVisibleText()

下拉列表中要取消选择选项的可见文本作为参数传递。它仅适用于多选下拉列表。

The visible text of the option to be deselected by the dropdown is passed as a parameter. It is only applicable to multi-select dropdowns.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectByVisibleText("Selenium");

deselectByValue()

下拉列表中要取消选择选项的 value 属性作为参数传递。下拉列表中的选项应具有 value 属性，才能使用此方法。它仅适用于多选下拉列表。

The value attribute of the option to be deselected by the dropdown is passed as a parameter. The options in the dropdown should have the value attribute so that this method can be used. It is only applicable to multi-select dropdowns.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectByValue("option 1");

deselectByIndex()

下拉列表中要取消选择选项的索引作为参数传递。索引从 0 开始。它仅适用于多选下拉列表。

The index of the option to be deselected by the dropdown is passed as a parameter. The index starts from 0. It is only applicable to multi-select dropdowns.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectByIndex(0);

deselectAll()

取消选择下拉列表中所有已选择的选项。

Unselects all selected options from the dropdown.

WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectAll();

getAllSelectedOptions()

返回下拉列表中的所有已选择选项。如果选择了多项选项，应返回 0 或多个已选择选项的列表。对于单选下拉列表，应返回 1 个已选择选项的列表。如果下拉列表针对某个选项具有禁用属性，则不会选择该选项。

Returns all the selected options in the dropdown. If there are multi options selected, 0 or list of multiple selected options shall be returned. For a single select dropdown, the list of the 1 selected option shall be returned. If a dropdown list has an attribute disabled for an option, that option would not be selected.

Example 1

我们以以下页面为例，其中我们将访问文本 Select One 下方的下拉列表，选择值 Dr 。

Let us take an example of the below page, where we would access the dropdown below the text Select One, select the value Dr.

代码实现

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class DropdownSingle {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will get dropdown
      driver.get("https://www.tutorialspoint.com/selenium/practice/select-menu.php");

      // identify dropdown then select its options by value
      WebElement dropdown = driver.findElement(By.xpath("//*[@id='inputGroupSelect03']"));
      Select select = new Select(dropdown);

      // get option selected by default
      WebElement o = select.getFirstSelectedOption();
      System.out.println("Option selected by default: " + o.getText());

      // select an option by value
      select.selectByValue("1");

      // get selected option
      List<WebElement> selectedOptions = select.getAllSelectedOptions();
      for (WebElement opt : selectedOptions){
         System.out.println("Selected Option is: " + opt.getText());
      }

      // get all options of dropdown
      List<WebElement> options =select.getOptions();
      for (WebElement opt : options){
         System.out.println("Options are: " + opt.getText());
      }

      // check if multiselect dropdown
      Boolean b = select.isMultiple();
      System.out.println("Boolean value for checking is: "+ b);

      // quitting browser
      driver.quit();
   }
}

Output

Option selected by default: Pick one title
Selected Option is: Dr.
Options are: Pick one title
Options are: Dr.
Options are: Mr.
Options are: Mrs.
Options are: Ms.
Options are: Proof.
Options are: Other
Boolean value for checking is: false

Process finished with exit code 0

在上面的示例中，我们使用控制台中的消息 - Selected Option is: Dr 获取了下拉列表中选定的选项。然后使用控制台中的消息 - Options are: Pick one title, Options are: Dr., Options are: Africa, Options are: Mr., Options are: Mrs., Options are: Ms, Options are: Proof 获取下拉列表中的所有选项，选项为：其他。

In the above example, we had obtained the selected option in the dropdown with the message in the console - Selected Option is: Dr. Then obtain all the options of the dropdown with the message in the console - Options are: Pick one title, Options are: Dr., Options are: Africa, Options are: Mr., Options are: Mrs., Options are: Ms, Options are: Proof., and Options are: Other.

我们还使用控制台中的消息 - Boolean value for checking is: false 验证下拉列表没有多选选项。我们还使用控制台中的消息 - Option selected by default: Pick one title 检索了下拉列表中默认选定的选项。

We had also validated that the dropdown did not have multiple selection options with the message in the console - Boolean value for checking is: false. We had also retrieved the option selected by default in the dropdown with the message in the console - Option selected by default: Pick one title.

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 2

我们再以以下页面为例，其中我们将访问文本多选下拉列表旁边的多选下拉列表，选择值 Books 和 Toys, Kids & Baby 。

Let us take another example of the below page, where we would access the multi-select dropdown beside the text Multi Select drop down, select the values Books and Toys, Kids & Baby.

代码实现

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class DropdownMultiple {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will get dropdown
      driver.get("https://www.tutorialspoint.com/selenium/practice/select-menu.php");

      // identify multiple dropdown
      WebElement dropdown = driver.findElement(By.xpath("//*[@id='demo-multiple-select']"));

      // object of Select class
      Select select = new Select(dropdown);

      // gets options of dropdown in list
      List<WebElement> options = select.getOptions();
      for (WebElement opt : options){
         System.out.println("Options are: " + opt.getText());
      }

      // return true if multi-select dropdown
      Boolean b = select.isMultiple();
      System.out.println("Boolean value for multiple dropdown: "+ b);

      // select item by index
      select.selectByIndex(5);

      // select item by visible text
      select.selectByVisibleText("Books");

      // get all selected options of dropdown in list
      List<WebElement> selectedOptions = select.getAllSelectedOptions();
      for (WebElement opt : selectedOptions){
         System.out.println("Selected Options are: " + opt.getText());
      }

      // get first selected option in dropdown
      WebElement f = select.getFirstSelectedOption();
      System.out.println("First selected option is: "+ f.getText());

      // deselect option by index
      select.deselectByIndex(5);

      // get first selected option in dropdown after deselecting
      WebElement e = select.getFirstSelectedOption();
      System.out.println("Second selected option is: "+ e.getText());

      // deselect all selected items
      select.deselectAll();

      // get all selected options of dropdown after deselected
      List<WebElement> delectedOptions = select.getAllSelectedOptions();
      System.out.println("No. options selected: " + delectedOptions.size());

      // Closing browser
      driver.quit();
   }
}

Output

Options are: Books
Options are: Movies, Music & Games
Options are: Electronics & Computers
Options are: Home, Garden & Tools
Options are: Health & Beauty
Options are: Toys, Kids & Baby
Options are: Clothing & Jewelry
Options are: Sports & Outdoors
Boolean value for multiple dropdown: true
Selected Options are: Books
Selected Options are: Toys, Kids & Baby
First selected option is: Books
Second selected option is: Books
No. options selected: 0

Process finished with exit code 0

在上面的示例中，我们使用控制台中的消息 - Options are: Books, Options are: Movies, Music & Games, Options are: Home, Garden & Tools, Options are: Health & Beauty, Options are: Toys, Kids & Baby, Options are: Clothing & Jewelry, Options are: Sports & Outdoors 获取了下拉列表中的所有选项。我们还使用控制台中的消息 - Boolean value for checking is: true 验证下拉列表具有多选选项。

In the above example, we had obtained all the options of the dropdown with the message in the console - Options are: Books, Options are: Movies, Music & Games, Options are: Home, Garden & Tools, Options are: Health & Beauty, Options are: Toys, Kids & Baby, Options are: Clothing & Jewelry, Options are: Sports & Outdoors. We had also validated that the dropdown had multiple selection options with the message in the console - Boolean value for checking is: true.

我们使用控制台中的消息 - Selected Options are: Books, Selected Options are: Toys, Kids & Baby 检索了下拉列表中的已选选项。我们还使用控制台中的消息 - First selected option is: Books 获取了第一项已选选项。

We had retrieved the selected options in the dropdown with the message in the console - Selected Options are: Books, Selected Options are: Toys, Kids & Baby. We had also obtained the first selected option with the message in the console - First selected option is: Books.

在取消选择第一项已选选项 Books 后，我们使用控制台中的消息 - Second selected option is: Books 接收了第二项已选选项。最后，我们取消选择了下拉列表中所有已选选项，因此使用控制台中的消息 - No. options selected: 0 获取了消息。

After deselecting the first selected option Books, then we had received the second selected option with the message in the console - Second selected option is: Books. Finally, we deselected all the selected options in the dropdown, and hence obtained the message in the console - No. options selected: 0.

Conclusion

这结束了我们对 Selenium Webdriver 下拉框教程的全面讨论。我们从描述 HTML 中的下拉列表识别、Selenium Webdriver 中的基本 Select 类方法以及示例开始，说明如何在 Selenium Webdriver 中使用它们。这让你深入了解 Selenium Webdriver 下拉框。明智的做法是继续练习所学知识并探索与 Selenium 相关的其他知识，以加深你的理解并拓展你的视野。

This concludes our comprehensive take on the tutorial on Selenium Webdriver Dropdown Box. We’ve started with describing identify Dropdown in HTML, basic Select class methods in Selenium Webdriver, and examples to illustrate how to use them in Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Dropdown Box. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.