Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Automate Dynamic Elements Using Parameterized XPaths in Testsigma

DZone's Guide to

Automate Dynamic Elements Using Parameterized XPaths in Testsigma

Learn how to automate the testing of dynamic elements by using parameterized XPaths in Testsigma.

· DevOps Zone ·
Free Resource

Do you need to strengthen the security of the mobile apps you build? Discover more than 50 secure mobile development coding practices to make your apps more secure.

Introduction

Nowadays, most websites deal with dynamic data and 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 XPaths. Let us discuss more using an example.

Sample Application — 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.

Note: This is a demo account and the data might be changed or removed later.

We assume that you are familiar with creating automated tests using Testsigma. If not, please refer the following link - Web Application Testing using Testsigma.

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:

Test Steps

 Implementation

Step 1

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 the OrangeHRM Website.

OrangeHRM Login Page


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:

Edit UI Identifier

Clicking on the login button takes us to the Dashboard page, as shown below:

OrangeHRM Dashboard

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 practice to add a reasonable wait time for pages with 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 in the following section.

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:
OrangeHRM Dashboard DOM StructureDocument List

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:

//li[@id='docTitle_.1']//a

//li[@id='docTitle_.2']//a

//li[@id='docTitle_.3']//a

//li[@id='docTitle_.4']//a

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 number 1 to 10. We can parametrize the variable portion using a Test Data profile.

The UI identifier will then become:

 //li[@id='docTitle_.,parameter name.']//a 

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:

 //li[@id='docTitle_.@|number|']//a 

The ‘@|number|’ part will be replaced by the parameter value in each iteration. That’s all we need to create Dynamic UI identifiers using Parameter Test Data.

Welcome to the era of #SmartTestAutomation!

Check out tips for blazing the way from agile to DevSecOps with security built into your mobile app toolchain.

Topics:
test automation ,devops ,automated testing ,software testing ,tutorial ,dynamic data

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}