# UI Element

## What is UI Element?

UI elements are integral part of a web application. They are responsible for interactions between the user and the application.

Refer <https://www.uxpin.com/studio/blog/user-interface-elements-every-designer-should-know/>

UI elements can be uniquely identified by their locators.&#x20;

A locator is a command that tells QATTS to locate a particular UI element.

## Create a UI Element

### Step by step walkthrough

To add an UI Element follow the below steps

**STEP 1**: Log into QATTS goto **Studio** on the left navigation panel, it directs to new window which will be appearing as shown below.

![](/files/-MgpSeICOkIC4wEvjWBv)

**STEP 2:** On the right corner Click on "**+**" icon and select **Add UI Element**, it should appear as below.

![](/files/-MgpTVp-2SrwoFfnk1f3)

**STEP 3:** Fill the required details as shown in the below screenshot.

{% hint style="info" %}
while filling **Wait Type** select " Time" and in **Wait Value** add value of at least "3 seconds".
{% endhint %}

&#x20;

* **UI Element Name:** The name could any of the user choice.
* **UI Element Type:** The user need to choose the type of the element such as button, text, file etc.
* **HTML Linking:** User need to define type of linking as xpath or others.
* **Locator path:** Here the locator id need to added.
* **Wait Type:** Here time is the default selection.
* **Wait Time:** Here user can add how many seconds the application searches for the locator.

![](/files/-Mk_rvG5iSDH5U39KCZM)

**STEP 4:** After adding required details and then click on **Save**, the given **UI Element name** would be saved in the groups you have selected it in.

### Short video

![](/files/-MkGTwEzjiqEHpt4qwmV)

**Special Locator Options**

DataSetName of custom data options based locators

Locators with Test Data

Locators with Product Element Label name


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.qatts.com/automation/objects/ui-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.