Dynamic Web Table Handling in Selenium

Web Tables are like normal tables where the data is presented in a structured form using rows and columns. The only difference is that they are displayed on the web with the help of HTML code.

Below are some of the important tags associated with a web table:

• < table > — Defines an HTML table
• < th > — Contains header information in a table
• < tr > — Defines a row in a table
• < td > — Defines a column in a table

Types of Web Tables

Depending on the data in the table, web tables can be classified as Static web tables and Dynamic web tables.

1. Static Web Tables

These tables have fixed data that remains unchanged throughout. Due to the static nature of their content, they are called Static web tables.

2. Dynamic Web Tables

These tables have data that changes over time, and hence the number of rows and columns might also change depending upon the data shifts. Due to the dynamic nature of their content, they are called Dynamic web tables.

Often, the functionalities of web applications depend on the data carried by Dynamic web tables, as they act as the data source for the functional modules in many cases. Thus, handling dynamic web tables using Selenium Web Driver is essential for QAs to run test cases that determine website performance.

How to handle web tables in Selenium?

Let’s understand the handling of web tables with the help of an example https://chercher.tech/practice/table

Handling Number Of Rows & Columns In Web Table

The < tr > tag in the table indicates the rows in the table and that tag is used to get information about the number of rows in it. Number of columns of the web table are calculated using XPath (“//*[@id=’webtable’]/tbody/tr[1]/th”).

Get number of rows for a web table in Selenium

len_rows = len(driver.find_elements_by_xpath(“//*[@id=’webtable’]/tbody/tr”))

Get number of columns for a web table in Selenium

len_columns=len(driver.find_elements_by_xpath(“//*[@id=’webtable’]/tbody/tr[1]/th”)

Print Content Of The Web Table

To access the content present in every row and column in the table, we iterate each and every row (< tr >) in the web table. Once the details about the rows are obtained, we iterate the < td > tags under that row.

In this case both the rows (< tr >) and columns (< td >) would be variable. Hence, the row numbers and column numbers are computed dynamically. Shown below is the XPath for accessing information in specific rows and columns:

• XPath to access Row : 2, Column : 2 — //*[@id=’webtable’]/tbody/tr[2]/td[1]
• XPath to access Row : 3, Column : 1 — “//*[@id=’webtable’]/tbody/tr[3]/td[1]

The web table in our case has 5 rows and 3 columns. Hence, a nested for loop is executed with rows ranging from 2 to 5 and columns ranging from 1 to 4. The variables factors row number and column number are added to formulate the final XPath.

before_XPath = “//*[@id=’webtable’]//tbody/tr[“

aftertd_XPath = “]/td[“

aftertr_XPath = “]”

Shown below is the complete implementation to get all the contents present to handle web table in Selenium.

import time
from selenium import webdriver
search_query="https://chercher.tech/practice/table"
 
driver = webdriver.Chrome(executable_path="/Users/radha/Downloads/chromedriver")
driver.get(search_query)
time.sleep(5)
 
len_rows = len(driver.find_elements_by_xpath("//*[@id='webtable']/tbody/tr"))
print("Rows in table are " + repr(len_rows))
len_columns=len(driver.find_elements_by_xpath("//*[@id='webtable']/tbody/tr[1]/th"))
print("Columns in table are " + repr(len_columns))
print("----------------------")
 
before_XPath = "//*[@id='webtable']//tbody/tr["
aftertd_XPath = "]/td["
aftertr_XPath = "]"
aftertd_XPath_1 = "]/td[1]"
aftertd_XPath_2 = "]/td[2]"
aftertd_XPath_3 = "]/td[3]"
for t_row in range(2, (len_rows + 1)):
for t_column in range(1, (len_columns + 1)):
                FinalXPath = before_XPath + str(t_row) + aftertd_XPath + str(t_column) + aftertr_XPath
                eachcell_text = driver.find_element_by_xpath(FinalXPath).text
                print(eachcell_text)
print("----------------------")
 
print("Data present in Rows, Col - 1")
print()
for t_row in range(2, (len_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("Data present in Rows, Col - 2")
print()
for t_row in range(2, (len_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("Data present in Rows, Col - 3")
print()
for t_row in range(2, (len_rows + 1)):
    FinalXPath = before_XPath + str(t_row) + aftertd_XPath_3
    cell_text = driver.find_element_by_xpath(FinalXPath).text
    print(cell_text)
print("-----------------------------")
print("Data present in Col - 1 header")
print()
 
before_XPath_1 = "//*[@id='webtable']/tbody/tr[1]/th["
before_XPath_2 = "//*[@id='webtable']/tbody/tr[2]/td["
after_XPath = "]"
for t_col in range(1, (len_columns + 1)):
    FinalXPath = before_XPath_1 + str(t_col) + after_XPath
    cell_text = driver.find_element_by_xpath(FinalXPath).text
    print(cell_text)
print("-----------------------------")
print("Data present in Col - 2")
print()
for t_col in range(1, (len_columns + 1)):
FinalXPath = before_XPath_2 + str(t_col) + after_XPath
    cell_text = driver.find_element_by_xpath(FinalXPath).text
    print(cell_text)
 
driver.close()
driver.quit()

The output snapshot to print content to handle web table in Selenium is below:

Output Snapshot

As demonstrated, handling the dynamic web table on a website is easy enough using Selenium. Run the code, evaluate the results, and start applying the same process to websites with this particular functionality.

Happy Testing!!!