Mastering Selenium Practice: Automating Web Tables with Demo Examples

Demo Webtable 1 (Static Table)

This table has 7 rows and 3 columns. So, the distribution of rows and columns is even. We can assume this table is a static or linear table. This table is easy to automate. 

Company	Contact	Country
Google	Maria Anders	Germany
Meta	Francisco Chang	Mexico
Microsoft	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Adobe	Yoshi Tannamuri	Canada
Amazon	Giovanni Rovelli	Italy

Demo Webtable 2 (Dynamic Table)

This table has an uneven distribution of rows and columns the last row has two columns only, but the other rows have 7 columns each. So, let's assume it is a dynamic table. This table is a tougher task.

Structure	Country	City	Height	Built	Rank	…
Total	4 buildings
Burj Khalifa	UAE	Dubai	829m	2010	1
Clock Tower Hotel	Saudi Arabia	Mecca	601m	2012	2
Taipei 101	Taiwan	Taipei	509m	2004	3
Financial Center	China	Shanghai	492m	2008	4

Selenium Practice Exercises for Demo Table 2 - 

• Verify that there are only 4 structure values present in the table with Selenium
• Verify that the 6th row of the table (Last Row) has only two columns with Selenium
• Find the tallest structure in the table with Selenium

1. Introduction

In this post, we will learn how to automate web tables with Selenium Webdriver. It's always tricky to fetch data from a web table using Selenium and when the table structure keeps changing every time on the basis of data to be shown then it becomes a more challenging task to automate it. First, let's learn how to read data from a web table with Selenium.

Table of Content
1. What is Web Table?
Types of Web Table
Static Table
Dynamic Table
2. Automate Reading data from Static Web Table with Selenium
Practice Exercises for automating Static Table
Solution Code for Static Table
Code Explanation
3. Automate Handling Dynamic Web Table with Selenium
Practice Exercises for automating Dynamic Table
Solution Code for Dynamic Table
Code Explanation

2. What is a Web Table?

A web table, also known as an HTML table, is a structured grid-like representation of data on a webpage. It is created using HTML markup tags and consists of rows and columns, similar to a spreadsheet or a traditional table. Web tables are commonly used to organize and present tabular data, such as financial data, product listings, schedules, and more, in a visually organized and easily readable format.

In a web table, each cell represents a unit of data, and rows and columns determine the arrangement of the data within the table. The table structure allows for easy navigation and interpretation of information. It enables users to compare data across different rows and columns, sort the table based on specific criteria, and interact with the data within the cells.

Web tables can be interacted with using automated testing tools and frameworks, such as Selenium WebDriver. Test automation scenarios often involve locating and extracting data from web tables, performing validations, and manipulating table data dynamically. 

2.1. HTML Tags for Table:

In HTML, the <table> tag is used to define a table on a webpage. It serves as the container for all the table-related elements, including table headers, table rows, and table data cells. Here are some commonly used tags associated with HTML tables:

1. <table>: The main container tag that defines the start and end of the table.
2. <thead>: Represents the table header section. It is typically used to group the header content, which usually consists of <th> (table header) elements.
3. <tbody>: Represents the table body section. It contains the main data rows of the table, typically defined using <tr> (table row) elements.
4. <tfoot>: Represents the table footer section. It is used to group the footer content, which may include a summary or aggregation of information for the table. Footer content is often enclosed within <td> (table data) elements.
5. <tr>: Defines a table row. It contains one or more <td> (table data) or <th> (table header) elements that represent the cells within that row.
6. <th>: Defines a table header cell. It is used to represent the header content for a column or row. <th> elements are typically placed within the <thead> section.
7. <td>: Defines a table data cell. It represents a data entry within a table row. <td> elements are typically placed within the <tbody> section.

Here's an example demonstrating the use of these tags in a table structure:

html
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>$15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total: $25</td>
    </tr>
  </tfoot>
</table>

In this example, we have a basic table structure with a header, body, and footer. The header row contains two columns: "Product" and "Price." The body section consists of two rows with corresponding product names and prices. The footer row spans across both columns using the colspan attribute and displays the total price.

Here's the table representation of the example I provided:

diff
+---------+-------+
| Product | Price |
+---------+-------+
| Item 1  |  $10  |
| Item 2  |  $15  |
+---------+-------+
| Total:  |  $25  |
+---------+-------+

In this representation, the table is displayed using ASCII characters to create a visual representation of the table structure. The header row is separated from the body and footer rows by a horizontal line. Each cell's content is aligned within its corresponding column, and the table content is surrounded by vertical and horizontal lines to create a clear distinction between cells and rows.

2.2. Types of Web Table

Some common types of tables include:

1. Static Table: A static table is a basic table where the content is predefined and does not change dynamically. It is typically created using HTML and CSS, and the data is hard-coded within the table structure. Static tables are useful for displaying fixed information that doesn't require frequent updates.

2. Dynamic Table: A dynamic table is a table that is populated with data dynamically, often retrieved from a database or through an API. The content of a dynamic table can change based on user interactions, data updates, or other events. JavaScript frameworks like React, Angular, or Vue.js are commonly used to create dynamic tables.

3. Responsive Table: A responsive table is designed to adapt and display effectively on different devices and screen sizes. It adjusts its layout and behavior based on the available screen space. Responsive tables often employ techniques such as horizontal scrolling, collapsing columns, or stacking rows to maintain readability and usability on smaller screens.

4. Data Grid: A data grid is a more advanced type of table that provides additional functionality for sorting, filtering, and manipulating data. It typically includes features like pagination, search, sorting columns, and editing capabilities. Data grids are commonly used in applications where managing and interacting with large datasets is required.

5. Pivot Table: A pivot table is a specialized table that allows for multidimensional data analysis and summarization. It enables users to reorganize and aggregate data based on different dimensions and criteria. Pivot tables are commonly used in data analytics and business intelligence applications.

6. Comparison Table: A comparison table is used to present and compare different attributes or features of items or options. It typically lists the items or options as rows and displays their characteristics or properties as columns. Comparison tables are often used in product comparisons, pricing plans, or feature comparisons.

3. Automate Reading data from Static Web Table with Selenium

We can automate the web table using the XPath locator. With xpath locator, we can find out the no. of rows and columns present in the table. And once we got the no. of rows and columns then it gets easier for us to fetch data from every table cell by using two loops one for the row and the other for the column.

We have to prepare the custom xpath for each table cell using these loops, we replace row no. and column no. as loop variables at run time.

3.1. Practice Exercises for Automating Demo Table 1 (Static Table)

i. Exercise: Read All the Values from the table row-wise and print them all.

1. Open URL - https://www.techlistic.com/p/demo-selenium-practice.html
2. Read the demo table 1's data row by row.
3. And print the values of each cell of the table.

ii. Solution Code for Static Table (Demo Table 1):

*Please note that you might have to change xpaths in the following example code to make it work.

public class Table {

 WebDriver driver = new FirefoxDriver();

 @BeforeTest
 public void setup() throws Exception {  

    driver.manage().window().maximize();
    driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
    driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
 }

 @AfterTest
 public void tearDown() throws Exception {
      driver.quit();
 }

 @Test
 public void print_data(){

 //Get number of rows In table.
 int Row_count = driver.findElements(By.xpath("//*[@id='post']/div[1]/table/tbody/tr")).size();
 System.out.println("Number Of Rows = "+Row_count);

 //Get number of columns In table.
 int Col_count = driver.findElements(By.xpath("//*[@id='post']/div[1]/table/tbody/tr[1]/td")).size();
 System.out.println("Number Of Columns = "+Col_count);

 //divided xpath In three parts to pass Row_count and Col_count values.
 String first_part = "//*[@id='post']/div[1]/table/tbody/tr[";
 String second_part = "]/td[";
 String third_part = "]";

 //Used for loop for number of rows.
 for (int i=1; i<=Row_count; i++){
  
  //Used for loop for number of columns.
  for(int j=1; j<=Col_count; j++){
   
   //Prepared final xpath of specific cell as per values of i and j.
   String final_xpath = first_part+i+second_part+j+third_part;
   
   //Will retrieve value from located cell and print It.
   String Table_data = driver.findElement(By.xpath(final_xpath)).getText();
   System.out.print(Table_data +" ");
  }

  System.out.println("");
  System.out.println("");
  }
 }
}

iii. Code Explanation step-by-step:

1. In setup, the method does all the config stuff, like launch a browser, open the URL, set wait, etc.
2. In the test method, findElements() method is used with xpath of the first table row (tr). It will extract all the table row elements and return a list. 
3. You can see, we have used the size() method at the end of the first line of the test method. This would return the size of the list. So, it's actually returning the no. of rows present on the table.
4. Similarly, we get table columns using the findElements() method along with the first table column xpath (tc). And then use size() method to get the no. of columns.
5. Store the no. of rows and columns in integer variables.
6. Now we create a custom xpath for table row and column, and we replace row and column index with variables. So, that we can iterate over every table row's td (cell) using for loop.
7. We have used first for loop row count, which will iterate over every row.
8. And second loop will iterate over every table data (td) of each row one by one.
9. So, loops work in the following fashion:
1. The first loop will be initialized with a row, which means i=1.
2. Now, execution will enter the second loop, and this loop will iterate over every column element (td) present in the first row. So, here i will remain 1 but the value of j keeps on changing by +1. After the value of j reached the total no. of columns present in the table, the second loop exits.
3. And now, the execution again comes to the first loop, and the value of i will be incremented by 1 and i becomes 2 a second time.
4. The step will be executed again and so on until the value of i reaches the total no. of rows present in the table.

4. Automate Dynamic Web Table with Selenium

Selenium doesn't provide us any specific command for handling a dynamic table. This is a special case in automation, so to handle this case we have to write the logic inside our code to handle the dynamic loading of data. It will require both Selenium and Coding skills.

For that, we have to put two for loops,

1. First loop will iterate all the rows.
2. Second loop inside the first loop and it will fetch the no. of columns present in that particular row and then iterate the columns.

You may also like to read:

• Top 10 Tech Stories on Techlistic
• Top 20 JAVA Interview Questions and Answers
• 50+ Selenium Webdriver Interview Questions
• All Essential Linux Commands tutorial
• What is a class in Python?
• Top 10 Highly Paid Indian CEOs in the USA
• What are OOPS Concepts in Java?
• Top 25 Selenium Webdriver Commands with Java

4.1. Practice Exercise: Verify that there are only 4 structure values present in the demo table

i. Steps: 

1. Open URL - https://www.techlistic.com/p/demo-selenium-practice.html
2. Read the 'Structure' column and find out the total number of structures present.
3. Read the value of the 'Total' column and match it with the previous step.

ii. Solution Hint:

• Use the list to store the structure values.
• Find the length of the list and match it with the expected value.

iii. Solution Code (Java):

java
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class StructureValuesVerification {

    public static void main(String[] args) {
        // Set the path to the chromedriver executable
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Launch the Chrome browser and navigate to the webpage
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");

        // Find the second table on the page
        WebElement table2 = driver.findElement(By.id("table2"));

        // Find all rows in the table
        java.util.List<WebElement> rows = table2.findElements(By.tagName("tr"));

        // Count the number of rows that have structure values
        int structureCount = 0;
        for (WebElement row : rows) {
            java.util.List<WebElement> cells = row.findElements(By.tagName("td"));
            for (WebElement cell : cells) {
                String cellText = cell.getText();
                if (cellText.equals("Structure")) {
                    structureCount++;
                }
            }
        }

        // Verify that there are only 4 structure values present in the table
        assert structureCount == 4;

        // Close the browser
        driver.quit();
    }
}

In the code above,

• We first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the get() method of the WebDriver.
• Next, we use the findElement() method of the WebDriver to locate the second table on the page, with the ID "table2". We then find all rows in the table using the findElements() method and the "tr" tag name.
• We then loop through each row and each cell in the table, checking if the cell text is equal to "Structure". If it is, we increment the structureCount variable.
• Finally, we use an assertion to check that the structureCount variable is equal to the expected value of 4. If the assertion fails, an AssertionError will be thrown.
• After the assertion has been checked, we close the browser using the quit() method.

4.2. Practice Exercise: Verify that Burj Khalifa has a height of 829m with Selenium

i. Steps: 

1. Open URL - https://www.techlistic.com/p/demo-selenium-practice.html
2. Read the 'Structure' column and find Burj Khalifa
3. Read the value of the height column for Burj Khalifa

ii. Solution Code (Java):

java
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class BurjKhalifaHeightVerification {

    public static void main(String[] args) {
        // Set the path to the chromedriver executable
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Launch the Chrome browser and navigate to the webpage
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");

        // Find the "Burj Khalifa" row in the table and get the height value
        WebElement burjKhalifaRow = driver.findElement(By.xpath("//tr[contains(.,'Burj Khalifa')]"));
        String burjKhalifaHeight = burjKhalifaRow.findElement(By.xpath(".//td[3]")).getText();

        // Verify that the height of Burj Khalifa is 829m
        assert burjKhalifaHeight.equals("829m");

        // Close the browser
        driver.quit();
    }
}

In the code above,

• We first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the get() method of the WebDriver.
• Next, we use the findElement() method of the WebDriver to locate the row in the table that contains the information for the Burj Khalifa.
• Once we have located the row, we use the findElement() method again to locate the cell containing the height value.
• We retrieve the text of this cell using the getText() method and store it in the burjKhalifaHeight variable.
• Finally, we use an assertion to check that the burjKhalifaHeight variable is equal to the expected value of "829m". If the assertion fails, an AssertionError will be thrown.
• After the assertion has been checked, we close the browser using the quit() method.

iii. Solution Code (Python):

python
from selenium import webdriver

# Launch the Chrome browser and navigate to the webpage
driver = webdriver.Chrome()
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html")

# Find the "Burj Khalifa" row in the table and get the height value
burj_khalifa_row = driver.find_element_by_xpath("//tr[contains(.,'Burj Khalifa')]")
burj_khalifa_height = burj_khalifa_row.find_element_by_xpath(".//td[3]").text

# Verify that the height of Burj Khalifa is 829m
assert burj_khalifa_height == "829m"

# Close the browser
driver.quit()

In the code above,

• We first launch the Chrome browser and navigate to the webpage. We then use the find_element_by_xpath() method to locate the row in the table that contains the information for the Burj Khalifa.
• Once we have located the row, we use the find_element_by_xpath() method again to locate the cell containing the height value. We retrieve the text of this cell using the text attribute and store it in the burj_khalifa_height variable.
• Finally, we use an assertion to check that the burj_khalifa_height variable is equal to the expected value of "829m". If the assertion fails, an AssertionError will be raised.
• After the assertion has been checked, we close the browser using the quit() method.

You may also like to read:

• How to Find all the broken links on a website with Selenium?
• What is an Actions Class in Selenium?
• What is Robot Class in Selenium?
• How to take partial screenshots with Selenium?

4.3. Practice Exercise: Verify that the last row (6th) of the table has only two columns with Selenium

Solution Code:

Here's the Selenium code in Java to verify that the 6th row of the table (Last Row) has only two columns:

java
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class LastRowVerification {

    public static void main(String[] args) {
        // Set the path to the chromedriver executable
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Launch the Chrome browser and navigate to the webpage
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");

        // Find the second table on the page
        WebElement table = driver.findElement(By.id("t01"));

        // Find the last row in the table
        WebElement lastRow = table.findElement(By.xpath("//tr[last()]"));

        // Find all columns in the last row
        java.util.List<WebElement> columns = lastRow.findElements(By.tagName("td"));

        // Verify that there are only two columns in the last row
        assert columns.size() == 2;

        // Close the browser
        driver.quit();
    }
}

In the code above, we first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the get() method of the WebDriver.

Next, we use the findElement() method of the WebDriver to locate the first table on the page, with the ID "t01". We then find the last row in the table using the findElement() method and the XPath expression "//tr[last()]".

We then find all columns in the last row using the findElements() method and the "td" tag name.

Finally, we use an assertion to check that the size of the columns list is equal to the expected value of 2. If the assertion fails, an AssertionError will be thrown.

After the assertion has been checked, we close the browser using the quit() method.

4.4. Practice Exercise: Find the tallest structure in the table with Selenium

Solution Code:

java
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;

public class TallestStructureFinder {

    public static void main(String[] args) {
        // Set the path to the chromedriver executable
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Launch the Chrome browser and navigate to the webpage
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");

        // Find the second table on the page
        WebElement table = driver.findElement(By.id("t01"));

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

        // Initialize variables to hold the maximum height and structure name
        double maxHeight = 0;
        String maxName = "";

        // Loop through each row in the table, skipping the header row
        for (int i = 1; i < rows.size(); i++) {
            // Find all columns in the current row
            List<WebElement> columns = rows.get(i).findElements(By.tagName("td"));

            // Get the height value from the second column
            double height = Double.parseDouble(columns.get(1).getText().replace("m", ""));

            // If the current height is greater than the current maximum height, update the maximum
            if (height > maxHeight) {
                maxHeight = height;
                maxName = columns.get(0).getText();
            }
        }

        // Print the name and height of the tallest structure
        System.out.println("The tallest structure is " + maxName + " with a height of " + maxHeight + "m");

        // Close the browser
        driver.quit();
    }
}

In the code above, we first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the get() method of the WebDriver.

Next, we use the findElement() method of the WebDriver to locate the second table on the page, with the ID "t01". We then find all rows in the table using the findElements() method and the "tr" tag name.

We initialize variables to hold the maximum height and structure name and loop through each row in the table using a for loop. We skip the first row, which contains the header row of the table.

For each row, we find all columns in the current row using the findElements() method and the "td" tag name. We then extract the height value from the second column by using the getText() method of the WebElement and removing the "m" unit from the string.

If the current height is greater than the current maximum height, we update the maximum height and structure name variables.

After looping through all rows in the table, we print the name and height of the tallest structure using the println() method.

Finally, we close the browser using the quit() method.

4.5. Practice Exercise: Read and Print all the values of rows and columns of the web table

Solution Code:

*Please note that you might have to change xpaths in the following example code to make it work.

public class DynamicTable {

  WebDriver driver = new FirefoxDriver();
  
  @BeforeTest
  public void setup() throws Exception {
  driver.manage().window().maximize(); 
  driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
  driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
  }

  @AfterTest
  public void tearDown() throws Exception {
      driver.quit();
  }

  @Test
  public void test_Dynamic_Webtable() {

  // Locate table
  WebElement mytable = driver.findElement(By.xpath(".//*[@id='post']/div[1]/table/tbody"));

  // Locate rows of table and save locators of each row in a list
  List rows_table = mytable.findElements(By.tagName("tr"));

  // Get 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++) 
  {
    // locate columns(cells) of that specific row.
    List Columns_row = rows_table.get(row).findElements(By.tagName("td"));

    // Get 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++) {

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

3.3. Code Explanation step-by-step:

1. All steps are exactly the same wrt the 3.2 section of this post, except for one step.
2. In the case of a static table, we are fetching the no. of columns before starting any for a loop. But in the case of a dynamic table, we are fetching columns after the first for loop has started.
3. It means that we are fetching the columns for every row separately because we don't know while writing the code how each row would have how many columns.
4. So, this is the way we are handling the dynamic web table in Selenium.

Popular Tutorials:

• Appium Tutorial
• Python Tutorial
• Java Tutorial
• Selenium with Java
• Behave BDD with Python
• Software Testing Complete Tutorial
• C Programming for Beginners
• Rest API Testing with Postman
• MS-Excel with VBA Tutorial
• Performance Testing with JMeter
• ROBOT Framework
• SOAP UI Testing
• TOSCA Testing Tutorial

Find Broken Links with Selenium  << Previous   ||   Next >>  Upload File with Selenium

Author

Vaneesh Behl

Passionately working as an Automation Developer for more than a decade.