Introduction

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. E-commerce websites are a good candidate for this due to a large proportion of dynamic content on their pages. Some of the web page Elements that constitute these pages and their attributes such as IDs or Class are also generated at run-time. 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.


Prerequisites

User is expected to be familiar with creation of Test Cases & Test Steps, usage of UI Identifiers, and Test Data

How to add Test Steps for Web Application Automation Testing?


Case Study - OrangeHRM

Here, we will be using a popular application such as OrangeHRM 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 article is created.


We will be doing the following steps in OrangeHRM website:


1. Go to OrangeHRM website

2. Enter the username

3. Enter the password

3. Store the username to a run-time variable( for reuse in dynamic UI Identifier)

4. Click on login_button

5. Verify that an element with the text 'Welcome ' followed by the stored user name is displayed on the page


Actual Steps - Implementation


1. Go to https://opensource-demo.orangehrmlive.com

This step is self-explanatory. Navigate to OrangeHRM website using grammar Go to test data


2. Type Admin in OHRM_Username field

Enter the user name in the OHRM_Username field using grammar Type test data in ui identifier field

We can create the step with a dummy ui identifier named OHRM_Username and later update the UI identifier value for the field. Please check this article for more details on adding UI identifiers while creating Test Cases - How to create UI Identifier while creating Test Step?


3. Type admin123 in OHRM_Password field

Enter the password in the OHRM_Password field using grammar Type test data in ui identifier field

This step is similar to the above step. You just need to modify the test data and ui identifier.


4. Store the value displayed in the text box OHRM_Username field into a variable user_name

Store the user name from the OHRM_Username field to a run-time variable named 'user_name' using the grammar Store the value displayed in the text box ui identifier field into a variable test data


Note: In this case, the value 'Admin' from the 'OHRM_Username' field is stored inside the run-time variable 'user_name'


5. Click on login_button

Click on Login button using the grammar Click on ui identifier. This step is similar to the 2nd and 3rd steps. You just need to modify the ui identifier since there's no test data for this step.


6. Verify that the current page displays an element welcome_username_link 

Verify that an element(welcome_username_link) with dynamic XPath containing the stored run_time parameter ''user_name" is present using the grammar Verify that the current page displays an element ui identifier



Creating Dynamic ui identifiers using run-time test data


In step #6, we are verifying that the page displays an Element 'welcome_username_link' containing text 'Welcome Admin'. Here, 'Admin' is the username that we got from the 'Username' field in step #4. 

Username of currently logged-in user can be dynamic and so we need to create a dynamic XPath containing the current Username.


For example,

//a[@id='welcome'][text()='Welcome Admin']


We have already got the username of currently logged-in user 'Admin' into the run-time parameter named 'user_name' in the Step #4. We just need to use the same in the dynamic XPath. That can be done as given below:


//a[@id='welcome'][text()='Welcome $|user_name|']


Now we can use the above XPath as the UI Identifier value of 'welcome_username_link' and the $|user_name| part will be translated to the value of runtime parameter 'user_name' when the Test Step is executed.




Here's a screenshot of the Test Case:


That’s all we need to create Dynamic ui identifiers using Runtime Parameter Test Data.


Run Results

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?


You may also perform a dry run clicking on the Run button on the Test Case details page.


Happy Test Automation!