Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added new Install Extension Doc & Updated Dynamic Locators Docs.r #378

Merged
merged 2 commits into from
Mar 18, 2024
Merged

Added new Install Extension Doc & Updated Dynamic Locators Docs.r #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7daaed7
Updated Dyncamic Locator, Added new Install Extension Docs
sangithravichandran Mar 18, 2024
0601390
Merge branch 'dev' into idea-1066
bharathk08 Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 70 additions & 101 deletions src/pages/docs/elements/dynamic-elements/with-parameter-test-data.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,108 @@
---
title: "Using Parameter Test Data for Dynamic locators"
title: "Dynamic Locators using Parameter"
page_title: "Dynamic Locators using Parameter: Enhance Test Stability"
metadesc: "This article discusses the usage of Parameter Test Data for creating dynamic locators to use in Data-driven Testing | Learn about Parameter Test Data"
noindex: false
order: 6.81
page_id: "Using Parameter Test Data for Dynamic locators"
page_id: "dynamic-locators-using-parameter-in-testsigma"
warning: false
contextual_links:
- type: section
name: "Contents"
- type: link
name: "Case Study - OrangeHRM Enterprise"
url: "#case-study---orangehrm-enterprise"
name: "Prerequisites"
url: "#prerequisites"
- type: link
name: "Actual Steps - Implementation"
url: "#actual-steps---implementation"
name: "Store Elements ID attribute into Test Data Profile"
url: "#store-elements-id-attribute-into-test-data-profile"
- type: link
name: "Creating Dynamic Elements using parameter test data"
url: "#creating-dynamic-elements-using-parameter-test-data"
name: "Creating Dynamic Elements using Parameter"
url: "#creating-dynamic-elements-using-parameter"
- type: link
name: "Run Results"
url: "#run-results"
name: "Configuring Test Data Profile in Test Case"
url: "#configuring-test-data-profile-in-test-case"
- type: link
name: "Run Results for Dynamic Elements using Parameter"
url: "#run-results-for-dynamic-elements-using-parameter"

---

---
Data-driven Testing is one of the most common cases where we make use of dynamic locators. In Testsigma, we use parameterized XPath or CSS Selector for dynamic locators. Let us discuss more using an example.

You should already be familiar with [Parameter Test Data](https://testsigma.com/docs/test-data/types/parameter/) and [Data-Driven Testing](https://testsigma.com/tutorials/test-cases/data-driven-testing/).

<br>
Dynamic locators are necessary for data-driven testing because they help adjust to changes in elements. You can use a Test Data profile to set the variable part of the ID attribute. The parameter name, called elements, holds the dynamic data for storing the dynamic part. Testsigma makes this easy using parameterised XPath or CSS Selectors in test steps. This guide will show you how with a practical example.

---
##**Case Study - OrangeHRM Enterprise**
Enterprise websites are a good candidate for this kind of testing due to the amount of dynamic content on their pages. Here, we will be using an OrangeHRM Enterprise web app for our demonstration.
So, let’s get started. We will be doing the following steps on the OrangeHRM website:
1. Goto OrangeHRM website using the action statement - Navigate to test data
2. Click on the Login button using the action statement - click on element
3. Wait for 3 seconds for page-load using the action statement - wait until the element is visible
4. Click on the document item in the documents list using the action statement - click on element

In the third and fourth steps, we will be using parameterized Elements i.e Elements 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 of OrangeHRM Test Case with dynamic](https://docs.testsigma.com/images/with-parameter-test-data/Elements-test-steps-dynamic-locators.png)
## **Prerequisites**

Before implementing dynamic locators using parameters in Testsigma, ensure familiarity with fundamental concepts such as creating a [Test Case](https://testsigma.com/docs/test-cases/manage/add-edit-delete/#creating-a-test-case), managing [Test Steps](https://testsigma.com/docs/test-cases/step-types/natural-language/), handling [Test Data Profiles](https://testsigma.com/docs/test-data/create-data-profiles/) and [Parameters](https://testsigma.com/docs/test-data/types/parameter/), and effectively utilising different [Test Data Types](https://testsigma.com/docs/test-data/types/overview/).

---
##**Actual Steps - Implementation**

**Step 1: Navigate to https://orangehrm-demo-6x.orangehrmlive.com/auth/login**

This step is self-explanatory. We can use the ‘Navigate to test data’ action to navigate to a website. Here, we are navigating to the login page of the OrangeHRM Enterprise website.

This step is self-explanatory. We can use the ‘Navigate to test data’ action to navigate to a website. Here, we are navigating to the login page of the OrangeHRM Enterprise website.

![OrangeHRM Enterprise Login page](https://docs.testsigma.com/images/with-parameter-test-data/orangehrm-enterprise-login-page.png)

**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 Element name loginbutton and later update the Element for the button.

Learn more - [Adding Elements while creating Test Cases](https://testsigma.com/docs/test-cases/create-steps-nl/web-apps/create-a-new-element/)

Due to the presence of an ID locator for the login page, the element for the ‘LOGIN button’ can be created easily using the ID locator as shown below:

![Edit loginbutton Element](https://docs.testsigma.com/images/with-parameter-test-data/edit-element-loginbutton.png)

Clicking on the login button takes us to the Dashboard page as shown below:
![OrangeHRM Enterprise Dashboard page](https://docs.testsigma.com/images/with-parameter-test-data/orangehrm-enterprise-dashboard.png)

**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 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.

<br>
## **Store Elements ID attribute into Test Data Profile**

We are using the Simply Travel Flight website as an example and sorting the city names and the variable part of the element's ID attribute in the test data profile.

1. Navigate to the website containing the elements you want to copy the **XPath**.
2. **Right-click** on the desired and select **Inspect** to open **Chrome Developer Tools**.
3. Use the **Select Element** icon to locate and inspect the element, then right-click the HTML tag and copy the **XPath**.
4. We will use the Simply Travel Flight website as an example of the above test steps. Click **Select from Cities** and copy the **XPath** values for the cities. ![Copy Xpath for storing](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/copy_xpath.gif)
5. The table below explains how the city names and their corresponding XPath for an element.
<table>
<tr>
<th>Cities</th>
<th>XPath</th>
</tr>
<tr>
<td>Los Angeles</td>
<td><code>//*[@id="city-1"]/div[2]/span[1]</code></td>
</tr>
<tr>
<td>Washington, D.C.</td>
<td><code>//*[@id="city-2"]/div[2]/span[1]</code></td>
</tr>
<tr>
<td>New York City</td>
<td><code>//*[@id="city-3"]/div[2]/span[1]</code></td>
</tr>
<tr>
<td>London</td>
<td><code>//*[@id="city-4"]/div[2]/span[1]</code></td>
</tr>
</table>

6. In the provided XPath examples, the IDs of the cities have a common portion, **city-**, followed by a variable digit from **1** to **4**. We will parameterise this by storing the city and the variable portion using a Test Data profile.
7. Navigate to **Test Data** > **Test Data Profile**. Click on **Create Test Data Profile**. ![Create TDP for storing element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/create_tdp_parameter.png)
8. Below is the created Test Data profile for storing element ID attributes: ![Sample TDP](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sample_tdp_dynamic.png)

---
##**Creating Dynamic Elements using parameter test data**
As you can see on 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 with First row selected](https://docs.testsigma.com/images/with-parameter-test-data/orangehrm-enterprise-dashboard-first-row-selected.png)

![OrangeHRM Dashboard Page Source](https://docs.testsigma.com/images/with-parameter-test-data/orangehrm-enterprise-dashboard-page-source.png)
## **Creating Dynamic Elements using Parameter**

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**<br>
**//li[@id='docTitle_.2']//a**<br>
**//li[@id='docTitle_.3']//a**<br>
**//li[@id='docTitle_.4']//a**
1. Use NLP to create a new step in the Test Case and include a placeholder for the element. ![Select Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/select_create_element_dp.png)
[[info | Example:]]
| Utilise NLP "Click on **Element**" to click an element with a given UI Identifier.

As you may have noticed already, the ids of the Document items in the Documents list have a common portion ‘docTitle_.’ followed by a variable digit from 1 to 10. We can parametrize the variable portion of the ID attribute using a Test Data profile.
2. Click on the **Element**, then select **Create Element** from the dropdown list.
3. Manually enter the **Element Name**, **Screen Name**, and **Element Type** in the **Create Element** overlay screen.
4. Provide the dynamic element value **//*[@id="@|cities|"]/div[2]/span[1]**, where **cities** is the parameter name containing dynamic data.
5. Click **Create Element** to complete element creation and then **Create Step**. ![Create Dynamic ELement using Parameter](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/create_element_usingparameter.gif)

The Element will then become:

**//li[@id='docTitle_.<parameter_name>']//a**

So it will be **//li[@id='docTitle_.@|number|']//a**

We just need to replace the <parameter_name> part with Test Data

**Example:**

Let us create a Test Data profile where we can store the dynamic part i.e. **elements** is the parameter name which is having dynamic data. So let us create a test data profile i.e, lets replace elements in place of parameter_name.

Learn more - [How to create a Test Data Profile](https://testsigma.com/docs/test-data/create-data-profiles/)

We have already created one as shown below:

![Test Data Profile with dynamic element index](https://docs.testsigma.com/images/with-parameter-test-data/test-data-profile-dynamic-element-index.png)

The highlighted portion is the parameter name in the Test Data profile and we will be adding this to the Element to make it dynamic.
**//input[@id='<parameter_name>']**

We can replace the **<parameter_name>** with actual test data parameter as given below:
**//input[@id='@|elements|']**

![Edit element with Parameter Test Data](https://docs.testsigma.com/images/with-parameter-test-data/edit-element-dynamic-locator-param-test-data.png)

The **@|elements|** part will be replaced by the parameter value corresponding to the Test Data profile in each iteration.
---

<br>
## **Configuring Test Data Profile in Test Case**

1. In Test Case details page, click **Test Case Settings** in the right-side navbar.
2. Choose the associated **Test Data Profile**.
3. Enable the **Data-Driven** toggle and select **Filter Type**, **Comparison Metric**, and **Data Iteration**. ![Config TDP in test case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/config_tdp_dynamic.gif)

---
##**Run Results**
Once the Test Case is updated with the dynamic Element 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.

![data-driven iterations test result with Test Data Profile-based dynamic element](https://docs.testsigma.com/images/with-parameter-test-data/orangehrm-test-case-data-driven-test-result-dynamic-element.png)
## **Run Results for Dynamic Elements using Parameter**

1. Once the test step created with the dynamic Element, execute the Test Case.
2. Wait until the Test Case execution is completed.
3. The Test Case will iterate as many times as there are **Test Data Sets (rows)** in the Test Data Profile, resulting in four iterations based on the provided example. ![Results for Dynamic Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/results_dynamicparameter.gif)

That’s all we need to create Dynamic Elements using Parameter Test Data.

---

Loading
Loading