使用 Selenium WebDriver 處理動態 Web 表 · Guru99 中文系列教程

# 使用 Selenium WebDriver 處理動態 Web 表 > 原文： [https://www.guru99.com/handling-dynamic-selenium-webdriver.html](https://www.guru99.com/handling-dynamic-selenium-webdriver.html) 網絡上發布了兩種類型的 HTML 表格- 1. **靜態表**：數據是靜態的，即行數和列數是固定的。 2. **動態表**：數據是動態的，即行數和列數不固定。以下是 Sales 動態表的示例。根據輸入日期過濾器，行數將被更改。因此，它本質上是動態的。 ![](https://img.kancloud.cn/21/f8/21f81223cd883ad1b000ebc6c8ac09a7_870x338.png) 處理靜態表很容易，但是由于行和列不是恒定的，所以動態表有點困難。 **在本教程中，您將學習-** * [使用 X 路徑定位 Web 表格元素](#1) * [示例：從動態 Web 表](#2)中獲取行數和列數 * [示例：獲取動態表](#3)中特定行和列的單元格值 * [示例：獲取動態表](#4)列中所有值的最大值 * [示例：獲取動態表](#5)的所有值 ## 使用 X-Path 定位 Web 表格元素在找到網絡元素之前，首先讓我們了解- **什么是網絡元素？** Web 元素不過是 HTML 元素，例如文本框，下拉單選按鈕，提交按鈕等。這些 HTML 元素以**開頭**標記編寫，以**結束**標記結尾。例如， **** 我的第一個 HTML 文檔 **。** 獲取要定位的 Web 元素的 X 路徑的步驟。 **步驟 1）**在 Chrome 中，轉到 [http://demo.guru99.com/test/web-table-element.php](http://demo.guru99.com/test/web-table-element.php) ![](https://img.kancloud.cn/4b/4f/4b4fcb518db20f16135add52f0537551_624x299.png) **步驟 2）**右鍵單擊要獲取其 x 路徑的 Web 元素。在我們的情況下，右鍵單擊“公司”，然后選擇“檢查”選項。將顯示以下屏幕- ![](https://img.kancloud.cn/d4/22/d4228133bc2b3036ad7ce89216a75678_554x493.png) **步驟 3）**右鍵單擊突出顯示的 Web 元素>選擇復制->復制 x 路徑選項。 ![](https://img.kancloud.cn/1e/20/1e2030a8836cd1db05c071992c271d0d_608x365.png) **步驟 4）**使用 Selenium WebDriver 中復制的 X 路徑“ // * [@ id =“ leftcontainer”] / table / thead / tr / th [1]”來查找元素。 ## 示例：從動態 Web 表獲取行和列數當表格本質上是動態的時，我們無法預測其行數和列數。使用 Selenium Web 驅動程序，我們可以找到 * Web 表的行數和列數 * X 行或 Y 列的數據。以下是用于獲取 Web 表的行和列總數的程序。 ![](https://img.kancloud.cn/21/a0/21a09ad729f67bd6fdeb0b106577dcdd_841x399.png) ``` import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class Noofrowsandcols { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.driver","G://chromedriver.exe"); wd= new ChromeDriver(); wd.get("http://demo.guru99.com/test/web-table-element.php"); //No.of Columns List col = wd.findElements(By.xpath(".//*[@id=\"leftcontainer\"]/table/thead/tr/th")); System.out.println("No of cols are : " +col.size()); //No.of rows List <webelement>rows = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); System.out.println("No of rows are : " + rows.size()); wd.close(); } }</webelement> ``` **代碼說明：** * 在這里，我們首先聲明 Web 驅動程序對象“ wd” &將其初始化為 chrome 驅動程序。 * 我們將列表< WebElement >用于“ col”中的總列數。 * findElements 命令返回與指定定位符匹配的所有元素的列表 * 使用 findElements 和 X 路徑// * [@@ id = \“ leftcontainer \”] / table / thead / tr / th，我們得到所有列 * 同樣，我們對行重復此過程。 . **輸出：** [![](https://img.kancloud.cn/47/29/4729422314287509233a971001b475b1_898x243.png) ](/images/2-2017/050217_0717_HandlingDyn6.png) ## 示例：獲取動態表中特定行和列的單元格值假設我們需要表的第 3 rd 行及其第二個單元格的數據。見下表 ![](https://img.kancloud.cn/16/cb/16cb2a4f520ef1f1a3559f24c71a8a8b_650x518.png) 在上表中，一段時間后數據會定期更新。您嘗試檢索的數據將與上述屏幕截圖不同。但是，代碼保持不變。這是獲取第 3 行和第列數據的示例程序。 ![](https://img.kancloud.cn/6f/53/6f539505f4212e348b1ce2093efab17e_836x429.png) ``` import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; public class RowandCell { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.driver","G://chromedriver.exe"); wd= new ChromeDriver(); wd.get("http://demo.guru99.com/test/web-table-element.php"); wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); WebElement baseTable = wd.findElement(By.tagName("table")); //To find third row of table WebElement tableRow = baseTable.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]")); String rowtext = tableRow.getText(); System.out.println("Third row of table : "+rowtext); //to get 3rd row's 2nd column data WebElement cellIneed = tableRow.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]")); String valueIneed = cellIneed.getText(); System.out.println("Cell value is : " + valueIneed); wd.close(); } } ``` **Code Explanation:** * 使用定位器屬性“標記名”定位表。 * 使用 [XPath](/xpath-selenium.html) “ // * [@ id = \” leftcontainer \“] / table / tbody / tr [3]”找到第 3 個行行，并使用 getText（）功能 * 使用 Xpath“ // * [@ id = \” leftcontainer \“] / table / tbody / tr [3] / td [2]”在 3 rd 行中找到第二個單元格，并使用 getText（）函數 **輸出**： ![](https://img.kancloud.cn/bb/7d/bb7d91de456f00756441de678e132a41_906x212.png) ## 示例：獲取動態表列中所有值的最大值在此示例中，我們將獲得特定列中所有值的最大值。請參考下表- ![](https://img.kancloud.cn/96/aa/96aa8fc30ea00a46f5f55024e9ead4d3_636x598.png) 這是代碼 ![](https://img.kancloud.cn/bc/87/bc87deb72815cf9ec368a5516404a9f5_870x541.png) ``` import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.text.NumberFormat; public class MaxFromTable { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.driver","G://chromedriver.exe"); wd= new ChromeDriver(); wd.get("http://demo.guru99.com/test/web-table-element.php"); String max; double m=0,r=0; //No. of Columns List col = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th")); System.out.println("Total No of columns are : " +col.size()); //No.of rows List <webelement>rows = wd.findElements(By.xpath (".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); System.out.println("Total No of rows are : " + rows.size()); for (int i =1;i<rows.size();i++) { max= wd.findElement(By.xpath("html/body/div[1]/div[5]/table/tbody/tr[" + (i+1)+ "]/td[4]")).getText(); NumberFormat f =NumberFormat.getNumberInstance(); Number num = f.parse(max); max = num.toString(); m = Double.parseDouble(max); if(m>r) { r=m; } } System.out.println("Maximum current price is : "+ r); } }</webelement> ``` **代碼說明：** * 使用 chrome 驅動程序，我們找到 Web 表并使用 XPath“ .//*[@id='leftcontainer']/table/tbody/tr/td[1]”獲取行總數 * 使用 for 循環，我們遍歷總行數并逐個獲取值。為了獲得下一行，我們在 XPath 中使用（i + 1） * 我們將舊值與新值進行比較，最大值在 for 循環的末尾打印 **輸出** ![](https://img.kancloud.cn/04/81/0481be9494880d9315a54dec55cde4fa_813x279.png) ## 示例：獲取動態表的所有值考慮下表 [http://demo.guru99.com/test/table.html](http://demo.guru99.com/test/table.html) ![](https://img.kancloud.cn/3c/97/3c97632e91222ba4e3056ab73637800e_143x153.png) 每行的列數是不同的。在這里，行號 1、2 和 4 有 3 個單元格，行號 3 有 2 個單元格，行號 5 有 1 個單元格。我們需要獲取所有單元格的值 **這是代碼：** ![](https://img.kancloud.cn/ad/d1/add188a1b2f62d82d07f296d32c067ba_887x570.png) ``` import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import java.util.concurrent.TimeUnit; import org.openqa.selenium.chrome.ChromeDriver; public class NofRowsColmns { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.driver","G://chromedriver.exe"); wd = new ChromeDriver(); wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); wd.get("http://demo.guru99.com/test/table.html"); //To locate table. WebElement mytable = wd.findElement(By.xpath("/html/body/table/tbody")); //To locate rows of table. List < WebElement > rows_table = mytable.findElements(By.tagName("tr")); //To calculate no of rows In table. int rows_count = rows_table.size(); //Loop will execute till the last row of table. for (int row = 0; row < rows_count; row++) { //To locate columns(cells) of that specific row. List < WebElement > Columns_row = rows_table.get(row).findElements(By.tagName("td")); //To calculate no of columns (cells). In that specific row. int columns_count = Columns_row.size(); System.out.println("Number of cells In Row " + row + " are " + columns_count); //Loop will execute till the last cell of that specific row. for (int column = 0; column < columns_count; column++) { // To retrieve text from that specific cell. String celtext = Columns_row.get(column).getText(); System.out.println("Cell Value of row number " + row + " and column number " + column + " Is " + celtext); } System.out.println("-------------------------------------------------- "); } } } ``` **Code Explanation:** * rows_count 給出總行數 * 對于每一行，我們使用 rows_table.get（row）.findElements（By.tagName（“ td”）））獲得列總數。 * 我們遍歷每一列和每一行并獲取值。 **輸出**： ![](https://img.kancloud.cn/15/c4/15c4f8f527453da66b611635515fbed7_728x410.png) **摘要** * By.xpath（）通常用于訪問表元素。 * 靜態 Web 表本質上是一致的。也就是說，它們確實具有固定的行數和單元格數據。 * 動態 Web 表是不一致的，即它們沒有固定數量的行和單元格數據。 * 使用 Selenium Web 驅動程序，我們可以輕松處理動態 Web 表。 * Selenium Webdriver 允許我們通過 X 路徑訪問動態 Web 表本文由 Kanchan Kulkarni 提供。