Nowadays, most of the websites deal with dynamic data and therefore it is not always feasible to keep a static page structure and layout since the values to be presented are generated dynamically. Some of the webpage Elements that constitute these pages and their attributes such as IDs or Class are generated during runtime. These dynamic page elements are a nightmare for the testers as there is no unique identifier and they can’t keep maintaining the pages on a daily basis as the attributes change. That is why we make use of dynamic XPath locators for Testing.
In Testsigma, one of the ways we can automate testing of dynamic elements is by using parameterized XPath. Let us discuss more using an example.
Case Study - orangeHRM
E-commerce websites or websites such as Gmail are a good candidate for this kind of testing due to a large proportion of dynamic content on their pages. Here, we will be using a popular application such as OrangeHRM Enterprise for our demonstration.
Disclaimer: Since the Test subject is a demo website that is accessible to all, the test data might be different or non-existent at a later time than when the course is created.
So let’s get started. We will be doing the following steps in OrangeHRM website:
1. Goto OrangeHRM website using the template go to test data
2. Click on Login button using the grammar click ui identifier
3. Wait for 3 seconds for page-load using the grammar wait until ui identifier is visible
4. Click on the document item in the documents list using the grammar click ui identifier
In the third and fourth step, we will be using parameterized ui identifiers i.e ui identifiers using Test Data to click on consecutive items in the documents list by iteration.
Here’s a screenshot of the steps created in Testsigma:
Actual Steps - Implementation
Step 1: Go to https://orangehrm-demo-6x.orangehrmlive.com/auth/login
This step is self-explanatory. We can use the ‘go to test data’ NLP grammar to navigate to a website. Here, we are navigating to the login page of OrangeHRM Website.
Step 2: Click on loginbutton
Since the username and password are filled in by default, we just need to click on the LOGIN button to log into the application. We can create the step with a dummy ui identifier name loginbutton and later update the UI identifier for the button. Please check this article for more details on adding UI identifiers while creating Test Cases - How to create UI Identifier while creating Test Step?
Due to the presence of id locator for the login page, the UI identifier for the LOGIN button can be created easily using id locator as shown below:
Clicking on login button takes us to the Dashboard page as shown below:
Step 3: Wait for 10 seconds
We need to add a wait time of 10 seconds since there are a lot of dynamic elements to load. It is a good practise to add a reasonable wait time for pages with a lot of dynamic content at the beginning while creating Tests. We can remove the wait step later if it's not necessary.
Step 4: Click on documentlistitem
This is the most important step in this tutorial. We need to click on the first four items in this list in each of our test iterations. Let us see how it is done.
Creating Dynamic ui identifiers using parameter test data
As you can see in the above page, there is a list of Documents below the Pie Chart. On inspecting the page, you can see the HTML structure of the Documents div element as shown below:
Luckily, we have id locators for these elements as well. We can use the following XPath for locating the first 4 items in the Documents list:
As you may have noticed already, the ids of the Document items in the Documents list has a common portion ‘docTitle_.’ followed by a variable digit from 1 to 10. We can parametrize the variable portion of ID attribute using a Test Data profile.
The ui identifier will then become:
We just need to replace the <parameter_name> part with Test Data
Let us create a Test Data profile where we can store the dynamic part i.e the number part at the end of the id. Please check the below article to know how to create a Test Data Profile - How to create Test Data Profile?
We have already created one as shown below:
The highlighted portion is the parameter name in the Test Data profile and we will be adding this to the ui identifier to make it dynamic.
We can replace the <parameter_name> with actual test data parameter as given below:
The @|number| part will be replaced by the parameter value corresponding to the Test Data profile in each iteration.
Once the Test Case is updated with the dynamic UI identifier as given above, we can execute the Tests. Please follow this article to know more about executing Tests - How to create/edit/delete Executions?
The Test Case iterates as many times as there are Test Data Sets(rows) in the Test Data Profile resulting in 4 iterations since we have four Test Datasets in the above Test Data Profile.
That’s all we need to create Dynamic ui identifiers using Parameter Test Data.
Happy Test Automation!