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. 

CompanyContactCountry
GoogleMaria AndersGermany
MetaFrancisco ChangMexico
MicrosoftRoland MendelAustria
Island TradingHelen BennettUK
AdobeYoshi TannamuriCanada
AmazonGiovanni RovelliItaly

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.

StructureCountryCityHeightBuiltRank
Total4 buildings
Burj KhalifaUAEDubai829m20101
Clock Tower HotelSaudi ArabiaMecca601m20122
Taipei 101TaiwanTaipei509m20043
Financial CenterChinaShanghai492m20084

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&lt;=Row_count; i++){
  
  //Used for loop for number of columns.
  for(int j=1; j&lt;=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.


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.



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&lt;=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&lt;=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.

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

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

Comments

  1. Finally, the analysis should either include on-page modifications to your web pages or a detailed report with instructions about how your webmaster or you can implement the changes. It should also include a qualified consultant's recommendations for additional on-page and off-page optimization. s10 flagcounter com

    ReplyDelete
  2. This information is so useful and informative which you have shared here. It is beneficial for beginners to develop their knowledge. It is very gainful information. Thanks for sharing! here's something you can check website development dubai. Thank you.

    ReplyDelete
  3. I just wanted to remark that, as we've seen, this is a nicely crafted post. I learned something new from your essay, and it is also a very important topic about toledo ohio web design. Thank you for sharing this article.

    ReplyDelete

Post a Comment

Popular posts from this blog

Automation Practice: Automate Amazon like E-Commerce Website with Selenium

Top 51 Most Important Selenium WebDriver Interview Questions

Top 7 Web Development Trends in the Market

Handle Multiple Browser Tabs and Alerts with Selenium WebDriver

Java Regular Expressions: A Comprehensive Guide with Examples and Best Practices

Selenium IDE Tutorial: How to Automate Web Testing with Easy-to-Use Interface

17 Best Demo Websites for Automation Testing Practice

Mastering User Interactions with the Actions Class in Selenium WebDriver

How to Automate Google Search with Selenium WebDriver

Python Behave Tutorial: A Comprehensive Guide to Behavior-Driven Development (BDD)