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

![](https://545053280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVX-yOtIHRnx7UtstUT%2F-Mgp4eu5xaGEWm-XurSa%2F-MgpSeICOkIC4wEvjWBv%2FSuit.JPG?alt=media\&token=de11e8f8-6ae1-43a6-93ac-31f5c86949e8)

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

![](https://545053280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVX-yOtIHRnx7UtstUT%2F-Mgp4eu5xaGEWm-XurSa%2F-MgpTVp-2SrwoFfnk1f3%2Ftempsnip.png?alt=media\&token=b6328ddd-29a7-43d3-9a11-5729ac1907b6)

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

![](https://545053280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVX-yOtIHRnx7UtstUT%2F-Mk_rQTtA9TM92S0zvCS%2F-Mk_rvG5iSDH5U39KCZM%2FNew%20UI%20Element.JPG?alt=media\&token=b50057b2-8e9e-41bb-a283-4c9659f96228)

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

![](https://545053280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVX-yOtIHRnx7UtstUT%2F-MkGSjyD3XFPBeA1LeDA%2F-MkGTwEzjiqEHpt4qwmV%2FCreating%20UI%20Element.gif?alt=media\&token=dda8950d-14ba-466a-9129-afc26cfa213f)