Selenium WebDriver - 動態網頁表格

Selenium WebDriver 可用於處理動態網頁表格（行數和列數不相等的表格）。每個表格在 HTML 中都由標籤名 table 標識。此外，表格中的每一行都具有標籤名為 tr，列的標籤名為 td。列標題由 th 標籤名標識。

在網頁上識別動態網頁表格

右鍵單擊在瀏覽器（例如 Chrome）中開啟的網頁，然後單擊“檢查”按鈕。這將顯示整個頁面的完整 HTML 程式碼。要檢查下面頁面上的網頁表格，請單擊下面突出顯示的左上方箭頭。

單擊箭頭並將其指向表格（如下圖所示）後，其 HTML 程式碼將可用，反映表格標籤名以及表格行、列和標題的 tr、td 和 th 標籤名。

thead 標籤下的 th 標籤名用於表格中的列標題。

<thead>
   <tr>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Age</th>
      <th scope="col">Email</th>
      <th scope="col">Salary</th>
      <th scope="col">Department</th>
      <th scope="col">Action</th>
   </tr>
</thead>

tbody 標籤下的 td 標籤名用於表格中的單元格值。

示例 1

讓我們以上面表格為例，我們將使用該表格的定位器 xpath 獲取具有 td 標籤名的表格的所有單元格值。

語法

Webdriver driver = new ChromeDriver();

// Locate the table element
WebElement table1 = driver.findElement(By.xpath("value of xpath"));

// Find all rows in the table then store in list
List<WebElement> r = table1.findElements(By.xpath(".//tr"));

// Looping through rows and get cell values
for (WebElement rw : r) {
   List<WebElement> cell = rw.findElements(By.xpath(".//td"));
   for (WebElement c : cell) {
      String value = c.getText();
   }
}

程式碼實現

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 java.util.List;
import java.util.concurrent.TimeUnit;

public class HandlingWebTable {
   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);

      // Open the webpage to identify table
      driver.get("https://tutorialspoint.tw/selenium/practice/webtables.php");
      
      // Locate the table element
      WebElement table1 = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/form/div[2]/table"));

      // Find all rows in the table
      List<WebElement> r = table1.findElements(By.xpath(".//tr"));

      // Looping through rows and get cell values
      for (WebElement rw : r) {
         List<WebElement> cell = rw.findElements(By.xpath(".//td"));
         for (WebElement c : cell) {
            String value = c.getText();
            System.out.println("Cells values: " + value);
         }
      }

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

輸出

Cells values: Cierra
Cells values: Vega
Cells values: 39
Cells values: cierra@example.com
Cells values: 10000
Cells values: Insurance
Cells values: 
Cells values: Alden
Cells values: Cantrell
Cells values: 45
Cells values: alden@example.com
Cells values: 12000
Cells values: Compliance
Cells values: 
Cells values: Kierra
Cells values: Gentry
Cells values: 29
Cells values: kierra@example.com
Cells values: 2000
Cells values: Legal
Cells values: 
Cells values: Alden
Cells values: Cantrell
Cells values: 45
Cells values: alden@example.com
Cells values: 12000
Cells values: Compliance
Cells values: 
Cells values: Kierra
Cells values: Gentry
Cells values: 29
Cells values: kierra@example.com
Cells values: 2000
Cells values: Legal
Cells values:

Process finished with exit code 0

在上面的示例中，我們捕獲了表格中的所有單元格值。

最後，收到訊息Process finished with exit code 0，表示程式碼成功執行。

示例 2

讓我們以同一個表格為例，我們將使用該表格的定位器 xpath 獲取具有 th 標籤名的表格的所有單元格標題。

語法

獲取表格中所有單元格標題的語法。

Webdriver driver = new ChromeDriver();
WebElement table1 = driver.findElement(By.xpath("value of xpath"));
List<WebElement> r = table1.findElements(By.xpath(".//tr"));

// Looping through rows and get cell values
for (WebElement rw : r) {
   List<WebElement> cell = rw.findElements(By.xpath(".//th"));
   for (WebElement c : cell) {
      String value = c.getText();
   }
}

程式碼實現

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 java.util.List;
import java.util.concurrent.TimeUnit;

public class HandlingWebTable {
   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);
      
      // Open the webpage
      driver.get("https://tutorialspoint.tw/selenium/practice/webtables.php");

      // Locate the table element
      WebElement table1 = driver..findElement
         (By.xpath ("/html/body/main/div/div/div[2]/form/div[2]/table"));

      // Find all rows in the table
      List<WebElement> r = table1.findElements(By.xpath(".//tr"));

      // Looping through rows and get headers
      for (WebElement rw : r) {
         List<WebElement> cell = rw.findElements(By.xpath(".//th"));
         for (WebElement c : cell) {
            String value = c.getText();
            System.out.println("Table headers: " + value);
         }
      }

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

輸出

Table headers: First Name
Table headers: Last Name
Table headers: Age
Table headers: Email
Table headers: Salary
Table headers: Department
Table headers: Action

Process finished with exit code 0

在上面的示例中，我們捕獲了表格中的所有表頭。

結論

本教程總結了 Selenium WebDriver 動態網頁表格的全面介紹。我們從描述如何在 HTML 中識別動態網頁表格開始，並透過示例說明如何在 Selenium WebDriver 中處理動態網頁表格。這使您能夠深入瞭解 Selenium WebDriver 動態網頁表格。最好繼續練習您所學的內容，並探索與 Selenium 相關的其他內容，以加深您的理解並拓寬視野。

列印頁面