Selenium 简明教程

Selenium Webdriver - Dynamic Web Tables

Selenium Webdriver 可用于处理动态 Web 表（行和列数不相等的表格）。每个表在 HTML 中都通过标签名 * table* 来标识。此外，表中的每一行都具有标签名 * tr* ，而列将具有标签名 * td* 。列标题通过 * th* 标签名来识别。

Selenium Webdriver can be used to handle dynamic web tables (tables having unequal number of rows and columns). Every table is identified by the tagname table in HTML. Also, each row in a table has the tagname as tr and the column will have a tagname as td. The column headers are identified by the th tagname.

Identify Dynamic Web Tables on a Web Page

右击在浏览器中打开的网页（例如 Chrome），然后单击“检查”按钮。这将显示整个页面的完整 HTML 代码。要调查下面页面上的 Web 表格，请单击如下所示的左上箭头。

Right click on the web page opened in a browser, say Chrome, and click on the Inspect button. This will display the complete HTML code for the whole page. To investigate a web table on the below page, click on the left upward arrow as highlighted below.

当我们单击并用箭头指向表格（在下面的图片中突出显示）时，其 HTML 代码将可用，它将同时反映表格标签名称以及行、列和标题的 tr、td 和 th 标记名称。

Once we had clicked and pointed the arrow to the table (highlighted in the below image), its HTML code would be available, reflecting both the table tagname along with along with tr, td, and th tag names for table rows, columns, and headers respectively.

th 标记名称在 thead 标记下表示表格中的列标题。

The th tag names under the thead tag are for the column headers in the tables.

<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 标记名称表示表格中的单元格值。

The td tag names under the tbody tag are for the cell values in the tables.

Example 1

让我们以上面的表格为例，我们将使用该表格的定位器 xpath，获取表格中所有具有标记名称 td 的单元格值。

Let us take an example of the above table, where we would get all the cell values of the table having the tagname as td using the locator xpath for that table.

Syntax

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();
   }
}

代码实现

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 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://www.tutorialspoint.com/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

在上面的例子中，我们已获取表格中的所有单元格的值。

In the above example, we had captured all the cell values in the table.

最后，收到了消息 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

让我们以相同的表格为例，我们将使用该表格的定位器 xpath，获取其中所有具有标记名称 th 的表格标题。

Let us take an example of the same table, where we would get all the cell headers of the table having the tagname as th using the locator xpath for that table.

Syntax

从表格中获取所有表格标题的语法。

Syntax to get all the cell headers from a table.

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();
   }
}

代码实现

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 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://www.tutorialspoint.com/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

在上述示例中，我们已捕获表中的所有表头。

In the above example, we had captured all the table headers in the table.

Conclusion

这就结束了我们关于 Selenium Webdriver 动态 Web 表格教程的全面介绍。我们从描述如何在 HTML 中识别动态 Web 表格开始，并举例说明如何在 Selenium Webdriver 中处理动态 Web 表格。这能让您深入了解 Selenium Webdriver 动态 Web 表格。明智的做法是继续练习您所学的内容并探索与 Selenium 相关的其他内容，以加深您的理解并拓宽您的视野。

This concludes our comprehensive take on the tutorial on Selenium Webdriver Dynamic Web Tables. We’ve started with describing identification of dynamic webtables in HTML, and examples to illustrate how to handle dynamic web tables in Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Dynamic Web Tables. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.