Selenium WebDriver - 下拉框

Selenium WebDriver 可以藉助 Select 類來處理網頁上的下拉框。網頁上可能有兩種下拉框 - 單選（選擇一個選項）和多選（選擇多個選項）。在 HTML 術語中，每個下拉框都由名為 select 的標籤名標識。此外，其每個選項都由名為 option 的標籤名標識。此外，對於多選下拉框，select 標籤名還有一個名為 multiple 的屬性。

在 HTML 中識別下拉框

右鍵單擊瀏覽器（例如 Chrome）中的網頁，然後單擊“檢查”按鈕。然後，將顯示頁面的所有 HTML 程式碼。要檢查網頁上的單選下拉框，請單擊 HTML 程式碼頂部突出顯示的左上方箭頭，如下圖所示。

單擊並將箭頭指向文字選擇一個旁邊的下拉框後，其 HTML 程式碼可見，反映了 select 標籤名（括在<>中），以及 option 標籤名中的選項。

此處，選項選擇一個標題具有 selected 屬性，反映了它預設被選中的事實。

Selenium WebDriver 中的基本 Select 類方法

Selenium WebDriver 中有多個 Select 類方法。它們列在下面：

getOptions()

返回下拉框中所有選項的列表。

語法

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

getFirstSelectedOption()

返回下拉框中選定的選項。如果有多個選項被選中，則只返回第一個專案。

語法

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

isMultiple()

返回布林值，如果下拉框允許選擇多個專案，則產生 true 值。

語法

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

selectByIndex()

下拉框要選擇的選項的索引作為引數傳遞。索引從 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 屬性，以便可以使用此方法。

語法

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

selectByVisibleText()

下拉框要選擇的選項的可視文字作為引數傳遞。

語法

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

deselectByVisibleText()

下拉框要取消選擇的選項的可視文字作為引數傳遞。它僅適用於多選下拉框。

語法

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

deselectByValue()

下拉框要取消選擇的選項的 value 屬性作為引數傳遞。下拉框中的選項應具有 value 屬性，以便可以使用此方法。它僅適用於多選下拉框。

語法

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

deselectByIndex()

下拉框要取消選擇的選項的索引作為引數傳遞。索引從 0 開始。它僅適用於多選下拉框。

語法

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

deselectAll()

取消選擇下拉框中所有選定的選項。

語法

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

getAllSelectedOptions()

返回下拉框中所有選定的選項。如果有多個選項被選中，則返回 0 或多個選中選項的列表。對於單選下拉框，將返回 1 個選中選項的列表。如果下拉列表的某個選項具有 disabled 屬性，則該選項將不會被選中。

示例 1

讓我們以以下頁面為例，我們將訪問文字選擇一個下方的下拉框，選擇值Dr。

程式碼實現

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://tutorialspoint.tw/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();
   }
}

輸出

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

在上面的示例中，我們獲得了下拉框中選定的選項，控制檯中的訊息為 - 選定的選項是：Dr。然後獲得下拉框的所有選項，控制檯中的訊息為 - 選項是：選擇一個標題，選項是：Dr.，選項是：Africa，選項是：Mr.，選項是：Mrs.，選項是：Ms，選項是：Proof.，和選項是：Other。

我們還驗證了下拉框沒有多個選擇選項，控制檯中的訊息為 - 檢查的布林值是：false。我們還檢索了下拉框中預設選擇的選項，控制檯中的訊息為 - 預設選擇的選項：選擇一個標題。

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

示例 2

讓我們再以以下頁面為例，我們將訪問文字多選下拉框旁邊的多選下拉框，選擇值書籍和玩具、兒童和嬰兒。

程式碼實現

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://tutorialspoint.tw/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();
   }
}

輸出

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

在上例中，我們在控制檯中獲取了下拉選單的所有選項，顯示資訊為：選項包括：書籍，選項包括：電影，音樂和遊戲，選項包括：家居，花園和工具，選項包括：健康和美容，選項包括：玩具，兒童和嬰兒，選項包括：服裝和珠寶，選項包括：運動和戶外。我們還在控制檯中驗證了該下拉選單允許多選，顯示資訊為：用於檢查的布林值為：true。

我們檢索到了下拉選單中已選擇的選項，控制檯顯示資訊為：已選擇的選項包括：書籍，已選擇的選項包括：玩具，兒童和嬰兒。我們還獲取了第一個已選擇的選項，控制檯顯示資訊為：第一個已選擇的選項是：書籍。

取消選擇第一個已選擇的選項書籍後，我們獲取了第二個已選擇的選項，控制檯顯示資訊為：第二個已選擇的選項是：書籍。最後，我們取消選擇了下拉選單中所有已選擇的選項，因此在控制檯中獲取的資訊為：已選擇選項數量：0。

結論

本教程對Selenium Webdriver下拉框進行了全面講解。我們從描述HTML中下拉框的識別、Selenium Webdriver中基本的Select類方法以及使用示例開始，說明如何在Selenium Webdriver中使用它們。這將使您深入瞭解Selenium Webdriver下拉框。建議您多加練習所學內容，並探索其他與Selenium相關的知識，以加深理解並拓寬視野。

列印頁面