Relative Locators in Selenium 4 : Yet another way to handle dynamic Web Tables and Pagination
In this article here we will see yet another way of handling dynamic web tables using the concept of Relative Locators which was introduced in Selenium 4. I have already discussed 2 more ways to do the same in my previous blog. Here is the link for the same:
The purpose of Relative Locators is to find a specific element which is located either to left, right, below, above or near another element. We can use the By locator parameter or WebElement element parameter to implement the same. The following is a list of all 5 Relative Locator methods in alphabetical order:
- above() — finds an element or elements located above a fixed element.
- below() — finds an element or elements located below a fixed element.
- near() — finds an element or elements located near a fixed element.
- toLeftOf() — finds an element or elements located to the left of a fixed element.
- toRightOf() — finds an element or elements located to the right of a fixed element.
Let us understand this concept using the same example we took in my last article. Again the code till displaying the employee list is the same for this method too which is:
Again, our test case is still the same ,i.e, we are supposed to search an employee with first name as ‘Lisa’ and the click on the checkbox corresponding to this employee. In order to use the concept of Relative Locators, we first have to import :
Now let us once again inspect our web element,
Now, for the checkbox, the tag name is input which is to the left of Lisa. So, now the XPath for Lisa is:
//a[contains(text(),’Lisa’)]
We have to find element for which the tagName is input and is to the Left of the above WebElemnet. Hence, the complete code would be :
And output would still be the same. Similarly, we can find elements relatively above, below, to the right, to the left or near any given WebElement depending on our requirement.
Pagination
Till this point here we were assuming that the employee is found on first page itself. Now lets take pagination also into consideration. Once more lets inspect the web portal for pagination:
There are many ways to handle pagination too depending on the behavior of the site. What we can see here is that the current page is under anchor tag whose text is the page number , 1 in the screenshot above and class name is current. The last page is also under the anchor tag with class name last and the href for it contains the link to the last page number which is 2 in this case. The link to next page is never disabled, even if we reach the last page. So, the way I have handled pagination for it is by extracting the text from current page and extracting the page number from the link to the last page. We would reach the last page when both the numbers are same. Also note that we can navigate through the pages from 2 places, we will be using the links present under the ul tag with class name as “paging bottom”
Here is the complete code including pagination also. So, now on whichever page we will get the employee, the corresponding checkbox is checked. It will display a message if it is not able to find the employee.
Lets create a function clickEmployee(String empName) this time and call it like this:
Here is the function definition:
And here is the output for an employee present on second page:
Hope you find it helpful.
Thanks for reading it.
References:
