Handling dynamic web tables in Selenium : power of custom XPath

There are two types of HTML tables published on the web-

Static tables: Data is static i.e. Number of rows and columns are fixed.

Dynamic tables: Data is dynamic i.e. Number of rows and columns are NOT fixed.

In this article, we will see two methods of handling dynamic web tables through Selenium.

Let’s consider the following link:

https://opensource-demo.orangehrmlive.com/index.php/auth/login

Login with the following credentials:

Username : Admin | Password : admin123

Click on PIM tab and navigate to Employee List.

We will get a list of employees which is stored in a dynamic web table. We are supposed to search an employee with first name as ‘Lisa’ and the click on the checkbox corresponding to this employee as shown below:

The code till logging in the portal and going to the employee list is common for both the methods. Also, note that here we are assuming that the employee is found on the first page itself and not taking pagination into consideration for the time being.

This can be achieved with the following code:

Method — 1:

Let us inspect the web element:

What we see is that all the employee list is in a web table with id = resultTable. The employee first name and the checkbox are the table data in different columns within the same row.

Now lets us see how we can traverse to these web elements via different methods.

We will first get the total number of rows in the table on the page. This can be achieved by calculating the total tr tags inside the table with the following XPath:

"//table[@id='resultTable']//tr"

Please note that the total rows would also include the heading row.

So now using a loop, we will traverse each row one by one. Inside the loop, we will put an if condition to search for the employee ‘Lisa’ and then go to the corresponding checkbox to click and hence check it.

Please find below the code for Method 1:

When you run this code, you will see that the checkbox corresponding to employee with first name as Lisa has been checked as shown below:

This method will iterate the entire table and hence lengthier and will take longer time to execute.

Method — 2:

In the second method we will create a custom XPath for the employee with first name Lisa.

Let’s once again inspect the web element.

The employee first name is under the anchor tag. So, we jump to that tag which contains the name Lisa like this:

//a[contains(text(),'Lisa')]

From here we go to its parent td tag

//a[contains(text(),'Lisa')]/parent::td

From here we then go to its preceding sibling td tag. Note that we will get 2 preceding siblings, but we have to select the one for which the input type is a checkbox:

//a[contains(text(),'Lisa')]/parent::td//preceding-sibling::td//input[@type='checkbox']

Now, just click it to check the checkbox and we will get the desired output.

Here is the code for this method:

And here is the output:

We no longer require any loop and there is no need to even iterate the entire table. Look at the simplicity of the code, with just one single line of code without using any loop we are able to achieve the desired result. This method is more efficient and faster when it comes to handling dynamic web tables.

Hope this article was helpful to you.

Thanks for reading!!!