Selenium WebDriver - 多選

Selenium Webdriver 可以使用 Select 類在網頁上的下拉選單中進行多選操作。網頁上的下拉選單可以分為兩種型別 - 單選和多選。

多選下拉選單由名為 select 的標籤名標識。此外，其每個選項都由名為 option 的標籤名標識。除此之外，多選下拉選單應具有一個名為 multiple 的屬性。

HTML 中多選下拉選單的識別

右鍵單擊網頁，然後在 Chrome 瀏覽器中單擊“檢查”按鈕，結果將顯示整個頁面的 HTML 程式碼。要檢查頁面上的多選下拉選單，請單擊可見 HTML 程式碼頂部可用的向左向上箭頭，如下所示。

一旦我們單擊並將箭頭指向文字多選下拉選單旁邊的下拉選單，其 HTML 程式碼就會可見，反映了 select 標籤名（括在<>中），以及 option 標籤名內的選項及其屬性 multiple。

Select 中的基本多選方法

Selenium webdriver 的 Select 類中提供了多種方法，可以幫助我們處理這兩種多選下拉選單。

示例

讓我們再舉一個以下頁面的例子，在這裡我們將訪問文字多選下拉選單旁邊的多選下拉選單，選擇值電影、音樂和遊戲、電子產品和電腦以及書籍，並使用上面討論的方法執行一些驗證。

程式碼實現

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 HandlingMultDropdown {
   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 visible text
      select.selectByVisibleText("Books");

      // select item by value
      select.selectByValue("2");

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

      // 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(2);

      // get all selected options of dropdown after deselecting 1
      List<WebElement> deletedOptions = select.getAllSelectedOptions();
      System.out.println("No. options selected after deselecting one option: " + deletedOptions.size());

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

      // get all selected options of dropdown after deselected
      List<WebElement> deletedAllOptions = select.getAllSelectedOptions();
      System.out.println("No. options selected after deselecting all: " + deletedAllOptions.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: Movies, Music & Games
Selected Options are: Electronics & Computers
First selected option is: Books
No. options selected after deselecting one option: 2
No. options selected after deselecting all: 0

Process finished with exit code 0

在上面的示例中，我們使用控制檯中的訊息獲取了下拉選單的所有選項 - 選項為：書籍，選項為：電影、音樂和遊戲，選項為：家居、園藝和工具，選項為：健康和美容，選項為：玩具、兒童和嬰兒，選項為：服裝和珠寶，選項為：運動和戶外。

我們還使用控制檯中的訊息驗證了下拉選單具有多個選擇選項 - 用於檢查的布林值為：true。我們使用控制檯中的訊息檢索了下拉選單中的選定選項 - 選定的選項為：書籍，選定的選項為：電影、音樂和遊戲，以及選定的選項為：電子產品和電腦。

我們還使用控制檯中的訊息獲取了第一個選定的選項 - 第一個選定的選項為：書籍。取消選擇一個選定的選項後，我們使用控制檯中的訊息收到了選定選項的數量 - 取消選擇一個選項後選定的選項數：2。

最後，我們取消選擇了下拉選單中所有選定的選項，因此在控制檯中獲得了訊息 - 取消選擇所有選項後選定的選項數：0。

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

這總結了我們對 Selenium Webdriver - 多選教程的全面介紹。我們從描述 HTML 中多選下拉選單的識別、Select 中的基本多選方法以及一個示例來說明如何在 Selenium Webdriver 中處理多選下拉選單開始。

這為您提供了 Selenium Webdriver - 多選的深入知識。明智的做法是不斷練習您所學到的知識，並探索與 Selenium 相關的其他知識，以加深您的理解並拓寬您的視野。