Handle Static and Dynamic Web Table in Selenium WebDriver


In this post, we will learn how to automate web table 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 more challenging task to automate it. First let's learn how to read data from a web table with Selenium.


NFT révolution
NFT révolution

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

1. What is a Web Table?

A web table is a way of representing data in rows and columns. It's the html representation of MS-Excel table. Web table has various html tags that automation engineer should be aware of like., table, th, tr, td. Let's understand these tags a bit more:
  • "<table>" - It defines a table. You can also say that it's the starting point of a table.
  • "<th>" - It defines a header cell, which means you should define your headings inside th tag.
  • "<tr>" - It defines a row in a table. 
  • "<td>" - It defines a cell in a table. "td" always lie inside the tr tag.

1.1. Types of Web Table

There are two types of web table., Static and Dynamic. Let's read more about both.

1.1.1. Static Table

As the name suggests, static table is a table which displays the static data. It means the data that it will display will not change on reloading the web page. So, in that case we know that there will r no. of rows and c no. of columns inside it.

1.1.2. Dynamic Table

First of all let's understand that what we call a dynamic table. So here is the answer, there might occur some scenarios where every time a page loads with different number of rows and columns or different columns for each row. When we don't know that how the expected data outcome will be presented in a table, that's called a dynamic table.

2. 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 for loops one for the row and other for the column.

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

2.1. Practice Exercises for automating Demo Table 1 (Static Table)

2.1.1. 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.
Solution Hint: 
  • Use for loop to read all the values of the table.

2.2. 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 working.

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

2.3. Code Explanation step-by-step:

  1. In setup method do all the config stuff, like launch a browser, open url, set wait etc.
  2. In 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 size() method at the end of first line of test method. This would return size of the list. So, it's actually returning the no. of rows present on table.
  4. Similarly, we get table columns using the findElements() method along with 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 custom xpath for table row and column, we replace row and column index to 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 for loop will iterate over every table data (td) of each row one by one.
  9. So, loops works in following fashion:
    1. First loop will be initialized with row, means i=1.
    2. Now, execution will enter in second loop, and this loop will iterate over every column element (td) present in the first row. So, here i will remain 1 but value of j keeps on changing by +1. After the value of j reached the total no. of columns present in table, second loop exits.
    3. And now, the execution again comes to first loop, and the value of i will be incremented by 1 and i becomes 2 second time.
    4. Step will be executed again and so on until the value of i reaches the total no. of rows present in table.


3. 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.

3.1. Practice Exercises for automating Demo Table 2 (Dynamic Table)

3.1.1. ExerciseVerify that there are only 4 structure values present in the demo table 2.
  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 'Total' column and match with the previous step.
Solution Hint:
  • Use list to store the structure values.
  • Find the length of the list  and match with the expected value.
3.1.2. Exercise: Verify that Burj Khalifa has a height of 829m with Selenium

3.1.3 Exercise: Verify that 6th row of the table (Last Row) has only two columns with Selenium

3.1.4. Exercise: Find the tallest structure in the table with Selenium

If you have automated all the practice exercises, then share your code in the comments or email us  with your name/credentials. Your code will be includes in this post along with your name credentials.

3.2. Solution Code for Dynamic Table (Demo Table 2):

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

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 same wrt the 2.2 section of this post, except one step.
  2. In case of a static table we are fetching the no. of columns before starting any for loop. But in case of dynamic table, we are fetching columns after 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 that 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 >>   How to Upload File with Selenium


Author
Passionately working as an Automation Developer from 12+ years. Let's connect on LinkedIn

Follow Us

YouTube Channel | Facebook Page | Telegram Channel | Quora Space
Feel free to ask queries or share your thoughts in comments or email us.

Comments

  1. Thanks for publishing such great information. You are doing such a great job. This information is very helpful for everyone. Keep sharing about web development company in pune. Thanks.

    ReplyDelete
  2. 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
  3. The information you've provided is useful because it provides a wealth of knowledge that will be highly beneficial to me. Thank you for sharing that. Keep up the good work. Web Design Tampa

    ReplyDelete
  4. 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
  5. Balboa is a leader in insurance tracking and "forced-place insurance." That means if a homeowner falls behind on premiums, the insurance company buys a new policy ontheir behalf so that the home stays insured. What Is Zander Insurance

    ReplyDelete
  6. I read your post and got it quite informative, It very helpful for me!
    Tata Steel Share Price

    ReplyDelete
  7. 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

10+ Best Demo Websites for Selenium Automation Testing Practice

Automate Amazon like E-Commerce Website with Selenium WebDriver

How to Automate Google Search with Selenium WebDriver

Top 7 Web Development Trends in 2022

50+ Most Important Selenium WebDriver Interview Questions and Answers

25+ Most Important Selenium WebDriver Commands Tutorial

How to Find Broken Links on Webpage with Selenium WebDriver