How to handle Web Tables in Selenium

Selenium is a widely used automation testing tool used to ensure that websites work as expected, in line with predetermined technical and business requirements. Using Selenium helps website developers comply with the growing demands made upon them i.e. faster release of updated and perfectly functioning features, ideally within every few weeks.

Selenium Webdriver, a major component of the Selenium Test Suite is a web framework that runs automated tests on websites to ensure all UI elements are functioning accurately.

Among essential UI elements, web tables are important for sites in which information has to be depicted in a tabular format. These tables could have static data that is fed once or could comprise dynamic data that automatically changes at regular intervals.

The data in the tables is often useful for the overall functionality of the web application. This makes it an important feature, which needs to be tested for accurate functioning using Selenium.

This article will demonstrate the testing of web tables using Selenium Webdriver through an example. However, let’s begin with understanding the types of web tables, and how they work.

What are Web Tables?

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.

<table> is the HTML tag that is used to define a web table. While <th> is used for defining the header of the table, <tr> and <td> tags are used for defining rows and columns respectively for the web table.

Example of writing a web table using HTML:

<table>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
 <tr>
  <td>Jill</td>
  <td>Ann</td>
  <td>24</td>
 </tr>
 <tr>
  <td>Eve</td>
  <td>Anderson</td>
  <td>34</td>
 </tr>
</table>

Output: The image shown below depicts how the web table written using code snippet above looks like.

Types of Web Tables

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

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

- 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 WebDriver 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. The example uses the data presented using web tables on the IPO Filings Data section of the NYSE (New York Stock Exchange) website to demonstrate the process.

Finding XPath Selected Element in Dynamic Web Table

Let’s select an element in the web table and find its XPath. For Chrome, right-click and inspect the given element to find its XPath.

To find the XPath of a UI element in Firefox, right-click on the desired element, go to “Inspect Element” to open the inspector which will help identify its XPath.

Finding the number of rows and columns of Dynamic Web Table in Selenium

Here’s the code snippet to find the total number of rows and columns for the above Dynamic Web Table

//Finding number of Rows
List<WebElement> rowsNumber = driver.findElements(By.xpath(“//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[1]/td[1]”));
int rowCount = rowsNumber.size();
System.out.println("No of rows in this table : " + rowCount);

Output: No of rows in this table: 8

//Finding number of Columns
List<WebElement> columnsNumber = driver.findElements(By.xpath("//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/thead/tr/th[1]"));

int columnCount = columnsNumber.size();
System.out.println("No of columns in this table : " + columnCount);

Output: No of columns in this table: 9

Finding cell value for specific row & column of Dynamic Web Table in Selenium

Let’s identify the data present in the 6th Row and 6th Column of the given dynamic web table on the IPO Filings Data page of the NYSE website:

WebElement cellAddress = Rowtable.findElement(By.xpath(“//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[4]/td[3]”));
String value = cellAddress.getText();
System.out.println(“The Cell Value is : “ +value);

Output: The Cell Value is: OLMA

Complete Code for handling web tables in Selenium

Purpose: Identify the number of rows & columns and fetching the cell value for given row and column from the IPO Filing Data web table on the NYSE website using Selenium

//Opening Chrome Browser
package browser;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class BrowserSelection
{
static WebDriver driver;

public static WebDriver usingChrome()
{
System.setProperty("webdriver.chrome.driver", "E:\SeleniumLibs\\chromedriver_win32\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().window().maximize();
return driver;
}
}

//Test to handle dynamic web table using Selenium WebDriver

package dynamicwebtable;

import java.awt.AWTException;
import java.awt.Robot;
import java.awt.event.KeyEvent;
import java.util.List;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

import browser.BrowserSelection;

public class DynamicWebTableTest
{
WebDriver driver;

@BeforeMethod
public void openBrowser()
{

driver = BrowserSelection.usingChrome();
}

@Test
public void tripDetails() throws InterruptedException, AWTException
{

//Modify Wait time as per the Network Ability in the Thread Sleep method

driver.get("https://www.nyse.com/ipo-center/filings");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
Thread.sleep(5000);

//Finding number of Rows

List<WebElement> rowsNumber = driver.findElements(By.xpath("//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[1]/td[1]"));
int rowCount = rowsNumber.size();
System.out.println("No of rows in this table : " + rowCount);

//Finding number of Columns

List<WebElement> columnsNumber = driver.findElements(By.xpath("//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/thead/tr/th[1]"));
int columnCount = columnsNumber.size();
System.out.println("No of columns in this table : " + columnCount);

//Finding cell value at 4th row and 3rd column

WebElement cellAddress = Rowtable.findElement(By.xpath(“//*[@id="content-8b4988b9-2ec9-4e77-9b4d-9c2994bd9e8a"]/div/div/table[1]/tbody/tr[4]/td[3]”));
String value = cellAddress.getText();
System.out.println(“The Cell Value is : “ +value);

driver.quit();
}

}

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.

To get accurate results and for identifying all the bottlenecks, it is recommended to run Selenium tests on real browsers and devices to ensure testing in real user conditions. Thus, running on cloud Selenium Grid is a great way to achieve best results.