如何在Selenium WebDriver中处理Web表？

迷南。 2023-01-14 10:54 141阅读 0赞

在需要以表格格式显示信息的情况下，通常使用Web表或数据表。本质上，显示的数据可以是静态的也可以是动态的。您经常会在电子商务门户网站中看到这样的示例，其中产品规格显示在Web表中。随着它的广泛使用，您经常会遇到需要在[Selenium测试][Selenium]自动化脚本中处理它们的场景。

在本[Selenium WebDriver教程][Selenium]中，我将看一下如何在Selenium中处理Web表以及可以在Web表上执行的一些有用操作。在本教程结束时，您将全面了解Selenium测试自动化中的Web表以及用于访问Web表内容的方法。

## Selenium中的Web表是什么？ ##

Selenium中的[Web表格][Selenium]是[WebElement][Selenium]，就像其他任何流行的WebElement一样，例如文本框，单选按钮，复选框，下拉菜单等。Web表格及其内容可以通过使用WebElement函数以及定位器来标识元素（行/列）。

表格由行和列组成。为网页创建的表称为网页表。以下是与网络表格相关的一些重要标记：

–定义一个HTML表

–在表中包含标题信息 –定义表中的一行 –定义表中的列

## Selenium中Web表的类型 ##

表格分为两大类：[http://github.crmeb.net/u/defu][Selenium]

**静态网页表**  
顾名思义，表中的信息本质上是静态的。

**动态网页表**  
表中显示的信息是动态的。例如，电子商务网站上的详细产品信息，销售报告等。

为了演示如何使用Selenium处理表格，我们使用w3school HTML表格页面中可用的表格。尽管使用表时跨浏览器测试的问题较少，但是Internet Explorer，Chrome和其他Web浏览器的某些旧版浏览器不支持HTML Table API。

既然我们已经介绍了基础知识，接下来在本Selenium WebDriver教程中，我将介绍一些处理Selenium中表的常用操作，这些操作将有助于您进行Selenium测试自动化工作。

## 在Selenium中处理Web表 ##

我将使用本地Selenium WebDriver来执行浏览器操作，以处理Selenium中的表，该表存在于w3schools html表页面上。tryit适配器页面中提供了用于演示的Web表的HTML代码。  
![在这里插入图片描述][20210420145049854.png]

可以从下面提到的位置下载适用于流行浏览器的Selenium WebDriver：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

我将使用Python unittest框架来处理Selenium WebDriver中的表。即使您将其他编程语言用于Selenium测试自动化，访问Web表中元素的核心逻辑也保持不变。

注–在所有方案中，setUp（）和teardown（）中的实现均相同。我们不会在博客中显示的每个示例中都重复该部分。

## 处理Web表中的行数和列数 ##

< tr >表中的标签指示表中的行，该标签用于获取有关表中行数的信息。使用XPath（// \* \[@ id =‘customers’\] / tbody / tr \[2\] / td）计算Selenium中Web表的列数。使用浏览器中的检查工具获取行和列的XPath，以处理Selenium中的表以进行自动浏览器测试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

尽管网络表中的标头不是< td >，但< th >在当前示例中仍可以使用标记来计算列数。使用< th >标记计算列数的XPath 是// \* \[@@ id =‘customers’\] / tbody / tr / th

添加了30秒的WebDriverWait，以确保在执行任何处理Selenium中的表的操作之前完成Web表的加载（CLASS\_NAME = w3-example）。

获取Selenium中Web表的行数

num_rows = len (driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr"))

获取Selenium中Web表的列数

num_cols = len (driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr[2]/td"))

完成实施

import unittest
    import time
    from selenium import webdriver
    from selenium.webdriver.support.select import Select
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
     
    test_url = "https://www.w3schools.com/html/html_tables.asp"
     
    class WebTableTest(unittest.TestCase):
     
        def setUp(self):
            self.driver = webdriver.Chrome()
            self.driver.maximize_window()
     
        def test_1_get_num_rows_(self):
            driver = self.driver
            driver.get(test_url)
            
            WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.CLASS_NAME, "w3-example")))
     
            num_rows = len (driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr"))
            print("表中的行是 " + repr(num_rows))
     
        def test_2_get_num_cols_(self):
            driver = self.driver
            driver.get(test_url)
            
            WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.CLASS_NAME, "w3-example")))
            # num_cols = len (driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr/th"))
            num_cols = len (driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr[2]/td"))
            print("表中的列是 " + repr(num_cols))
     
        def tearDown(self):
            self.driver.close()
            self.driver.quit()
     
    if __name__ == "__main__":
        unittest.main()

下面是输出快照  
![在这里插入图片描述][20210420145221159.png]

## 用Selenium打印Web表的内容 ##

为了访问Selenium中每一行和每一列中存在的内容来处理Selenium中的表，我们迭代< tr >了Web表中的每一行（）。获得有关行的详细信息后，我们将迭代该< td >行下的标签。

在这种情况下，对于本Selenium WebDriver教程，行（< tr >）和列（< td >）都是可变的。因此，行号和列号是动态计算的。下面显示的是用于访问特定行和列中的信息的XPath：

XPath访问行： 2，列：2 – // \* \[@@ ==“ customers”\] / tbody / tr \[2\] / td \[1\]

XPath访问行： 3，列：1 – // \* \[@ id =“ customers”\] / tbody / tr \[3\] / td \[1\]

执行Selenium测试自动化的表具有7行3列。因此，执行嵌套的for循环时，行的范围为2…7，列的范围为1…4。添加变量因子，即行号和列号，以制定最终的XPath。

for t_row in range(2, (rows + 1)):
      for t_column in range(1, (columns + 1)):
          FinalXPath = before_XPath + str(t_row) + aftertd_XPath + str(t_column) + aftertr_XPath
          cell_text = driver.find_element_by_xpath(FinalXPath).text

本Selenium WebDriver教程下面显示的是将所有存在的内容处理到Selenium中的表的完整实现。

import unittest
    import time
    test_url = "https://www.w3schools.com/html/html_tables.asp"
     
    before_XPath = "//*[@id='customers']/tbody/tr["
    aftertd_XPath = "]/td["
    aftertr_XPath = "]"
     
        def test_get_row_col_info_(self):
            driver = self.driver
            driver.get(test_url)
            
            # time.sleep(30)
            WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.CLASS_NAME, "w3-example")))
     
            rows = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr"))
            # print (rows)
            columns = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr[2]/td"))
            # print(columns)
            
            # print("Company"+" "+"Contact"+" "+"Country")
     
            for t_row in range(2, (rows + 1)):
                for t_column in range(1, (columns + 1)):
                    FinalXPath = before_XPath + str(t_row) + aftertd_XPath + str(t_column) + aftertr_XPath
                    cell_text = driver.find_element_by_xpath(FinalXPath).text
                    # print(cell_text, end = ' ')
                    print(cell_text)
                print()

下面是打印内容以处理Selenium中的表的输出快照：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]

## 读取行中的数据以处理Selenium 中的表 ##

为了访问每一行中的内容，以处理Selenium中的表，行（< tr >）是可变的，而列（< td >）将保持不变。因此，行是动态计算的。在本Selenium WebDriver教程的下面，是用于访问信息的XPath，其中行是变量因子，而列对于Selenium测试自动化而言保持不变。

XPath访问行： 1，列：1 – // \* \[@ id =” customers”\] / tbody / tr \[1\] / td \[1\]

XPath访问行： 2，列：2 – // \* \[@@ ==“ customers”\] / tbody / tr \[2\] / td \[2\]

XPath访问行： 3，列：2 – // \* \[@ id =“ customers”\] / tbody / tr \[3\] / td \[2\]

for循环的执行范围为2…7。列值附加到XPath的值为td \[1\] / td \[2\] / td \[3\]，具体取决于必须访问以处理Selenium中的表的行和列。

before_XPath = "//*[@id='customers']/tbody/tr["
    aftertd_XPath_1 = "]/td[1]"
    aftertd_XPath_2 = "]/td[2]"
    aftertd_XPath_3 = "]/td[3]"
     
    for t_row in range(2, (rows + 1)):
        FinalXPath = before_XPath + str(t_row) + aftertd_XPath_1
        cell_text = driver.find_element_by_xpath(FinalXPath).text
        print(cell_text)

完成实施

#Selenium Webdriver教程可在Selenium中处理以实现Selenium测试自动化
    import unittest
    import time
    from selenium import webdriver
    from selenium.webdriver.support.select import Select
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
     
    test_url = "https://www.w3schools.com/html/html_tables.asp"
     
    before_XPath = "//*[@id='customers']/tbody/tr["
    aftertd_XPath_1 = "]/td[1]"
    aftertd_XPath_2 = "]/td[2]"
    aftertd_XPath_3 = "]/td[3]"
    #aftertr_XPath = "]"
     
        def test_get_row_col_info_(self):
            driver = self.driver
            driver.get(test_url)
            
            # time.sleep(30)
            WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.CLASS_NAME, "w3-example")))
     
            rows = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr"))
            # print (rows)
            columns = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr[2]/td"))
            # print(columns)
     
            print("行中的数据，列1")
            print()
            for t_row in range(2, (rows + 1)):
                FinalXPath = before_XPath + str(t_row) + aftertd_XPath_1
                cell_text = driver.find_element_by_xpath(FinalXPath).text
                print(cell_text)
            
            print()    
            print("2列显示数据")
            print()
            for t_row in range(2, (rows + 1)):
                FinalXPath = before_XPath + str(t_row) + aftertd_XPath_2
                cell_text = driver.find_element_by_xpath(FinalXPath).text
                print(cell_text)
                
            print()
            print("数据显示在行中，第3列")
            print()
            for t_row in range(2, (rows + 1)):
                FinalXPath = before_XPath + str(t_row) + aftertd_XPath_3
                cell_text = driver.find_element_by_xpath(FinalXPath).text
                print(cell_text)

读取行中的数据以处理Selenium中的表的输出快照如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]

## 读取列中的数据以处理硒中的表 ##

对于按列访问Selenium中的句柄表，行保持不变，而列号是可变的，即列是动态计算的。在此Selenium WebDriver教程的下面是XPath，用于访问信息，其中列是可变的，行是恒定的。

XPath访问行：2，列：2 – // \* \[@@ ==“ customers”\] / tbody / tr \[2\] / td \[2\]

XPath访问行：2，列：3 – // \* \[@ id =“ customers”\] / tbody / tr \[2\] / td \[3\]

XPath访问行：2，列：4 – // \* \[@ id =“ customers”\] / tbody / tr \[2\] / td \[4\]

执行for循环时，列的范围为1…4。根据必须访问的行和列，将行值附加到XPath上的是tr \[1\] / tr \[2\] / tr \[3\]。

before_XPath_1 = "//*[@id='customers']/tbody/tr[1]/th["
    before_XPath_2 = "//*[@id='customers']/tbody/tr[2]/td["
    after_XPath = "]"
     
    for t_col in range(1, (num_columns + 1)):
       FinalXPath = before_XPath_1 + str(t_col) + after_XPath
       cell_text = driver.find_element_by_xpath(FinalXPath).text
       print(cell_text)

完成实施

import unittest
    import time
    from selenium import webdriver
    from selenium.webdriver.support.select import Select
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
     
    test_url = "https://www.w3schools.com/html/html_tables.asp"
     
    before_XPath_1 = "//*[@id='customers']/tbody/tr[1]/th["
    before_XPath_2 = "//*[@id='customers']/tbody/tr[2]/td["
    after_XPath = "]" 
     
    def test_get_row_col_info_(self):
            driver = self.driver
            driver.get(test_url)
            
            # time.sleep(30)
            WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.CLASS_NAME, "w3-example")))
     
            num_rows = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr"))
            # print (rows)
            num_columns = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr[2]/td"))
            # print(columns)
     
            print("列1中的数据，即标题")
            print()
            for t_col in range(1, (num_columns + 1)):
                FinalXPath = before_XPath_1 + str(t_col) + after_XPath
                cell_text = driver.find_element_by_xpath(FinalXPath).text
                print(cell_text)
                
            print("列2中的数据")
            print()
            for t_col in range(1, (num_columns + 1)):
                FinalXPath = before_XPath_2 + str(t_col) + after_XPath
                cell_text = driver.find_element_by_xpath(FinalXPath).text
                print(cell_text)

从执行快照中可以看到，还读取了标题列以获取列的标题。  
![在这里插入图片描述][20210420145402300.png]

## 定位元素以处理硒中的表 ##

此Selenium WebDriver教程的测试目的是在Web表中查找元素的存在。为此，将读取Web表的每个单元格中的内容，并将其与搜索词进行比较。如果存在该元素，则将打印相应的行和元素以处理Selenium中的表。

由于涉及读取每个单元格中的数据，因此我们利用标题为Selenium中的Web表的打印内容的部分中介绍的逻辑。执行不区分大小写的搜索以验证搜索项的存在以处理Selenium中的表。

for t_row in range(2, (num_rows + 1)):
      for t_column in range(1, (num_columns + 1)):
          FinalXPath = before_XPath + str(t_row) + aftertd_XPath + str(t_column) + aftertr_XPath
          cell_text = driver.find_element_by_xpath(FinalXPath).text
          if ((cell_text.casefold()) == (search_text.casefold())):
             print("搜索文本"+ search_text +" 在第二排 " + str(t_row) + " 和列" + str(t_column))
             elem_found = True
             break

完成实施

import unittest
    import time
    from selenium import webdriver
    from selenium.webdriver.support.select import Select
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
     
    test_url = "https://www.w3schools.com/html/html_tables.asp"
     
    before_XPath_1 = "//*[@id='customers']/tbody/tr[1]/th["
    before_XPath_2 = "//*[@id='customers']/tbody/tr[2]/td["
    after_XPath = "]"
     
    search_text = "mAgazzini Alimentari rIUniti"
     
        def test_get_row_col_info_(self):
            driver = self.driver
            driver.get(test_url)
            
            # time.sleep(30)
            WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.CLASS_NAME, "w3-example")))
     
            num_rows = len(driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr"))
            num_columns = len (driver.find_elements_by_xpath("//*[@id='customers']/tbody/tr[2]/td"))
            
            elem_found = False
     
            for t_row in range(2, (num_rows + 1)):
                for t_column in range(1, (num_columns + 1)):
                    FinalXPath = before_XPath + str(t_row) + aftertd_XPath + str(t_column) + aftertr_XPath
                    cell_text = driver.find_element_by_xpath(FinalXPath).text
                    if ((cell_text.casefold()) == (search_text.casefold())):
                        print("Search Text "+ search_text +" is present at row " + str(t_row) + " and column " + str(t_column))
                        elem_found = True
                        break
            if (elem_found == False):
                print("Search Text "+ search_text +" not found")

如本Selenium WebDriver教程的执行快照所示，搜索词出现在第7行和第1列  
![在这里插入图片描述][20210420145425254.png]

尽管可以在Selenium的Web表上执行许多此类操作，但我们已经在本Selenium WebDriver教程中介绍了核心方面。

[Selenium]: http://github.crmeb.net/u/defu
[20210420145049854.png]: /images/20221022/f26392b42c4c4534a2f799183ab88d63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/15b54d673c044b258007e1293c9f42d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221022/1c4ecf8271c44b40adc01cc89809c87b.png
[20210420145221159.png]: /images/20221022/9472e4be622b42ab8e884a87a28c37c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 2]: /images/20221022/faef1292b7804551b610e77d22470567.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 3]: /images/20221022/2188882a65fd420e983e663b973c96b9.png
[20210420145402300.png]: /images/20221022/6dcfc0697c784294a92ac17d2b0922f8.png
[20210420145425254.png]: /images/20221022/c60cb7a00744409ba8561a35fbdad707.png