In the Selenium WebDriver tutorial, we have learned about a lot of comprehensive topics and how we use them in our automation script. One such topic to be given focus here is Webtable in Selenium. We have seen a lot of websites where product specifications are displayed in tabular form for better representation and user understanding like an E-commerce website. Web table is an important element in web pages and while writing automation script, we also need to write scripts to read or capture web table data. By the end of this tutorial, you’ll attain a fair understanding of the webtable in Selenium WebDriver along with approaches used to access the data in the web table. Here we will be covering the below-mentioned topics:
- What is WebTable in Selenium?
- What are the different types of Web tables in Selenium?
- How to handle static and dynamic webtable in Selenium?
- How to locate an element in a webtable in Selenium?
- Similarly, how to print the size of a dynamic webtable in Selenium?
- How to read data from the rows of a web table?
- How to read data from the columns of a web table?
- Also, how to print web table content in Selenium?
- How to validate the dynamic behavior of the webtable in Selenium?
What is WebTable in Selenium?
A Web table or data table is a logical way of representing data on the web in the form of rows and columns i.e in tabular form. Web table is like any other web element on the website like a text box or a radio button and can be assessed using different available locators in Selenium. Below are the basic tags that are generally used to define HTML tables:
- <table> tag for creating HTML table.
- The <tbody> tag provides a container for rows and columns.
- <th> tag is for table heading
- <tr> defines rows in an HTML table.
- <td> define the data/cell of an HTML table.
The snapshot below displays an Employee web table that has 7 columns and 3 rows of records. Here, First name, last name, Age, email, salary, department, and action are all headings. Similarly, data stores in the respective column. This image is taken from WebTables In DemoQA
We can do multiple operations on this web table like adding a new record in the table, editing the existing record, or deleting the records. In addition to this, we can get records that we filter as well. We will discuss all these operations and concepts later in the post.
In HTML, we form a table by using the <tr> and <td> HTML tags where <tr> represent rows and <td> represents columns of the table. We use other tags also for creating tables. Below is an example of an HTML table where the first row is the header and the other two rows contain data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<table> <tbody> <tr> <th>Automation Tool</th> <th>Licensing</th> <th>Market Feedback</th> </tr> <tr> <td>Selenium</td> <td>Free</td> <td>Yes</td> </tr> <tr> <td>QTP</td> <td>Paid</td> <td>Yes</td> </tr> <tr> <td>Jmeter</td> <td>Free</td> <td>Yes</td> </tr> </tbody> </table> |
This is how the table will be rendered when it will be opened in a web browser:
This table is static in nature as the number of rows and columns are fixed and performing any kind of operation on such a table is comparatively easier than a dynamic webtable in Selenium. More elaboration on this in our next topic on different types of Web table.
What are the different types of Web Tables In Selenium?
There are two types of web tables in Selenium:
- Static Web Table: This type of tabular representation has fixed data in the rows and columns and the rows and columns are definite. Eg. table of months, table of days, etc.
- Dynamic Web Table: Dynamic table has dynamic data as rows and columns are not fixed and they keep on increasing or decreasing basis the data. For Eg: Sales table, Student table. Mostly dynamic tables are more popular in use.
How to handle static and dynamic web tables in Selenium?
Like any other web element, for performing any operation on the web table we have to inspect the table data and locate the elements. Locating elements and traversing through the table data depends on the type of web table that we are working on as Selenium WebDriver works differently on different types of webtable. Let’s start by locating an element in the web table.
How to locate an element in a webtable in Selenium?
When the web table is definite, we can locate elements using row and column. This is achieved by assessing these WebElements using Xpath. Please visit how to inspect elements in a browser for more detailed steps on the same. In this program, we are locating and printing the value of Row 1 and Column 1 element i.e First Name. Using a similar approach we can inspect and locate any record from the web table.
- Navigate to URL “https://demoqa.com/webtables“.
- Right-click on First Name and select the Inspect button.
- From the Web inspector, you can write the Xpath as shown below:
The below code snippet will read the text of the header of the first column by using the above-mentioned XPath:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class webtable { public static void main (String[] args) { //Create web driver instance and open the url System.setProperty("webdriver.chrome.driver","./src/main/resources/chromedriver"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/webtables"); //Locate the cell value and store it in string format. Now read the value and print it String value = driver.findElement(By.xpath("//div[@class='rt-resizable-header-content']")).getText(); System.out.println(value); driver.quit(); } } |
When we run the above program, it will print the output as shown below:
Using a similar approach we can get the values of other cells of the web table as well and print their values.
How to print the size of a dynamic Webtable in Selenium?
The web table below is dynamic in nature where the number of rows and columns keeps on fluctuating depending upon the filters or sorting applied to it. We will be calculating and printing the table size here.
We have used Xpath here for locating the table on the webpage.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 webtable { public static void main (String[] args) { System.setProperty("webdriver.chrome.driver","./src/main/resources/chromedriver"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/webtables"); //Store the table size WebElement webtable = driver.findElement(By.xpath("//div[contains(@class,'ReactTable')]")); // Get the Number of rows in the table List<WebElement> rows = webtable.findElements(By.xpath("//div[contains(@class,'rt-tr-group')]")); //Print the rows size System.out.println("Total Number of visible rows in the table is: " + rows.size()); //Print the number of rows which has data List<WebElement> rowsWithData = webtable.findElements(By.xpath("//div[contains(@class,'rt-td') and text()]/ancestor::div[contains(@class,'rt-tr-group')]")); //Print the rows size System.out.println("Number of rows having data in the table is: " + rowsWithData.size()); driver.quit(); } } |
When we execute the above code, it will show the sample output as shown below:
By evaluating the size of the web table we can analyze the amount of data we can save in the table and how much size we can increase as per our requirement.
How to read data from the rows of a web table?
All the records of data are stored in rows in a web table. Suppose, if we have the get the data of 2nd row only, as highlighted below:
The below code snippet reads data from all the cells of the 2nd row and prints the same:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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 webtable { public static void main (String[] args) { System.setProperty("webdriver.chrome.driver","./src/main/resources/chromedriver"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/webtables"); //Store the table size WebElement webtable = driver.findElement(By.xpath("//div[contains(@class,'ReactTable')]")); //Get the rows which has data List<WebElement> rowsWithData = webtable.findElements(By.xpath("//div[contains(@class,'rt-td') and text()]/ancestor::div[contains(@class,'rt-tr-group')]")); //Print the text of 2nd row System.out.println("Data of 2nd row is: \n" + rowsWithData.get(1).getText()); driver.quit(); } } |
We have printed all the data horizontally for rows 2 and 3, which is present in the rows of the table.
We can print data in any format on the console based on the requirement, you can try different approaches and share your feedback with us.
How to read data from the columns of a web table?
For accessing the data of a particular column we will check the <td> tag in the web table. Additionally, taking the example of the snapshot below we will be printing the second column which is the “Last Name”.
Consequently, below is the code snippet of how we will achieve this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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 webtable { public static void main (String[] args) { System.setProperty("webdriver.chrome.driver","./src/main/resources/chromedriver"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/webtables"); //Store the table size WebElement webtable = driver.findElement(By.xpath("//div[contains(@class,'ReactTable')]")); //Get 2nd column cells which has data List<WebElement> colsWithData = webtable.findElements(By.xpath("//div[@class='rt-td'][2][text()]")); //Print the text of 2nd column System.out.println("Data of 2nd Column is: "); for(int index =0; index<colsWithData.size(); index++) { System.out.println(colsWithData.get(index).getText()); } driver.quit(); } } |
Here, we have located the 2nd column using the XPath “//div[@class=’rt-td’][2][text()]“, which searched for the 2nd column which has the text. Subsequently, when we run the above code-snippet, it will show the sample output as below:
How to print Web table content in Selenium?
Now when you know how to print a single row or a single column of a web table, there can be a scenario where we have to display and print the complete webtable in selenium. Subsequently, we will be using Web tables in DemoQA. again for this problem statement.
In the code snippet below we printed the entire web table and only those rows which contain data, blank rows that contain no data do not print as of now.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 webtable { public static void main (String[] args) { System.setProperty("webdriver.chrome.driver","./src/main/resources/chromedriver"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/webtables"); //Store the table size WebElement webtable = driver.findElement(By.xpath("//div[contains(@class,'ReactTable')]")); //Get rows which has data List<WebElement> rowsWithData = webtable.findElements(By.xpath(".//div[contains(@class,'rt-td') and text()]/ancestor::div[contains(@class,'rt-tr-group')]")); //Print the whole web table System.out.println("Table Data is: "); for(int rowIndex =0; rowIndex<rowsWithData.size(); rowIndex++) { System.out.println("Data of Row " + (rowIndex+1) + " is:"); List<WebElement> colsWithData = rowsWithData.get(rowIndex).findElements(By.xpath(".//div[@class='rt-td'][text()]")); for(int colIndex =0; colIndex<colsWithData.size(); colIndex++) System.out.println("Data at Cell with Row "+ (rowIndex+1) + " Column " + (colIndex+1) + " : "+ colsWithData.get(colIndex).getText()); } driver.quit(); } } |
The output of the above program is as below:
Consequently, here we have printed only rows which contain data and omitted those rows which are blank, we can print the complete table as well with the blank rows.
How to validate the dynamic behavior of the Webtable in Selenium?
Consider a scenario, where the data in the table changes dynamically. Suppose on the ToolsQA demo website “https://demoqa.com/webtables“, when we search for a text, the number of visible rows changes accordingly. As shown in the below screenshot when we search for “Alden“, it shows only one row:
The following code snippet shows a sample, how we can validate such changes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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 webtable { public static void main (String[] args) { System.setProperty("webdriver.chrome.driver","./src/main/resources/chromedriver"); WebDriver driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/webtables"); //Store the table size WebElement webtable = driver.findElement(By.xpath("//div[contains(@class,'ReactTable')]")); //Get the rows which has data List<WebElement> rowsWithData = webtable.findElements(By.xpath(".//div[contains(@class,'rt-td') and text()]/ancestor::div[contains(@class,'rt-tr-group')]")); //Print the number of rows visible System.out.println("No of Rows Visible: " + rowsWithData.size()); //Search for Alden in the search box driver.findElement(By.id("searchBox")).sendKeys("Alden"); //Get the rows which has data rowsWithData = webtable.findElements(By.xpath(".//div[contains(@class,'rt-td') and text()]/ancestor::div[contains(@class,'rt-tr-group')]")); //Print the number of rows visible System.out.println("No of Rows Visible after Search: " + rowsWithData.size()); driver.quit(); } } |
When we run the above code snippet, it shows the sample output is:
As is evident from the above screenshot, the number of visible rows reduces to 1 after the search, which shows the dynamic behavior of the web tables.
Practice Exercises:
Subsequently, you can try out the following exercises to extend your hands-on for understanding the web tables in more depth:
Exercise 1:
- For the above program of dynamic web table, print the content of rows before and after search.
- In the same program, validate that the row which was at 2nd position before search appears at 1st position after the search.
Exercise 2:
- Firstly, lunch a new Browser session
- Secondly, open the URL “https://demoqa.com/books”.
- After that, get the value of the column “author” of the book store table.
- Finally, print the name of all the authors of the bookstore table.
Key TakeAways
- Webtable in Selenium is a tabular representation of data on a webpage. It is similar to a WebElement in Selenium like text boxes, radio buttons, drop-down menus, etc. In addition to this, there are two types of web tables- static web table and dynamic web table.
- Additionally, Xpath and CssSelector are common locators for accessing web table rows and columns.
- Moreover, we can do a lot of operations on a web table. Such as reading the text from the table, counting a number of rows and columns, reading only column data, or only row data of a web table.
