Managing Node and UI Elements

TABLE OF CONTENTS

1. Overview

2. Configure a Node using drag and drop functionality

1. Overview

This article provides you the details to configure nodes, add corresponding features and UI elements after creating a project.

2. Configure a Node using drag-and-drop functionality.

To create a project for a new user, follow the steps described in the create an offline model topic.

2.1 Node Management 

In the Main Canvas, you can 

• edit a node by selecting the required node and clicking the Edit button available in the right-top corner and click Save to save the changes.
• cancel the changes if you don't want to save the configuration changes for a specific node and return to the default settings.
• zoom the view in and out by clicking  the Zoom in and Zoom out icons.
• delete or remove a node by clicking the Remove button available next to the Edit button.

2.2 UI elements Management 

In the UI elements configuration pop-up window,  you can 

• add new UI elements to the required feature by clicking the New Control button available in the upper-right corner, update the attributes of UI element, such as control name, control value, navigation, business rules, test data or control value and locator. By default, one UI element is configured.
  Following table describes attributes and its description of UI elements line item.

  Attributes	Description
  Control Name	Enter the UI element (control) name. For example, in the login page, submit button is a UI element name.
  Control Type	Select the UI element type. In the preceding example, it is a clickable button  that triggers the submission of the username and password data to authenticate the user.
  Navigation	Select this button to switch between different section names or tab names on the page.
  Business Rules	This button will be enabled, when you select the Textbox, Dropdown list and Text area UI elements type.  You can generate different sets of data using business rules. Business rules helps to validate text field, text area and dropdown list. Business Rules categories are:     a. Correct values     b. Incorrect values     c. Illegal values     d. Invalid values     e. Boundary values
  Control Value	Enter the test data or parameters for the UI element. For example, When you enter "enter your name" in the UI element text box, the parameter is <username>.
  Locator	You can update the XPath information captured using algoScraper tool
  Delete Icon	You can delete a created UI element line item.
  Set the Default Action	You can enter the default action by clicking the More Menu (three dots) and then click Save.

  
  Following table provides various UI element types list used in Node Configuration:
  
  

  UI Element Type	Description
  Textbox	The Textbox UI element allows you to input text into a field. It is used in forms or interfaces where you need to provide information, such as entering your name or email address.
  Button	A Button is a clickable element that performs an action, like submitting a form or opening a new page.
  Radio Button	A Radio Button is a clickable option that allows you to choose one item from a set of choices. Once selected, the other options in the group are automatically deselected.
  Checkbox	A Checkbox is a small box that you can check or uncheck to select or deselect an option. Multiple checkboxes in a group allow users to choose more than one option at a time.
  Link	A Link is a clickable element on a webpage that takes you to another page or resource when you click on it.
  Dropdown List	A dropdown list is a menu that appears when you click the arrow in a box. It shows a list of options that you can choose from.
  Image	An allows an application or website to display an image. It helps in verifying and comparing the image.
  Text area	A text area provides a multi-line input field where you can enter or edit text. It allows for more text input compared to a regular text box and is often used for comments or descriptions.
  File Upload	A file upload allows you to select and upload files from  device to a website or application. It appears as a button or input field where you can browse your files and choose the one you wish to upload.
  Label	A label is a text used in a website or app to explain what a button, text box, or other element does. For example, a label might say "Username" next to a text box where you enter your name. It helps users know what to do with that element.
  Page	A page refers to a single screen or view that displays content to the you. It can contain text, images, buttons, links, and other elements that you can interact with. For example, in a Website, a home page displays a welcome message, navigation links, and other content.
  Anchor Tag (Optional)	A Anchor tag <a> can be used to link to a specific section in a page.
  Mouse	A Mouse refers to a visual component in the user interface (UI) that responds to mouse input. These elements are designed to interact with the user when they use a mouse to perform actions like clicking, hovering, or dragging.
  Scroll	A scroll refers to the action of moving content up, down, or sideways within a window or container to view more information that extends beyond the visible area.
  Window	A window is a rectangular area on the screen that displays content and allows interaction with an application or system.
  New Tab	A New Tab in applications or web browsers that allows you to open a new tab for viewing or interacting with different content without navigating away from the current screen.
  Parent (optional)	A Parent organizes and contains child UI elements, helping to structure and manage their layout and interaction within the interface.

  
  
• click the Guide info icon to navigate to the Keywords used in article.
• search for a particular UI element by entering a keyword from the UI element's name in the search textbox. The matching elements will appear as you type.
• select all the UI elements by selecting the 'Select All' checkbox or clicking the Select All Controls button.
• select multiple UI elements by clicking the double tick icon. Upon selecting the multiple UI elements, Move selected controls icon will be enabled allowing you to move the UI elements (controls) to different features.
• delete the selected UI elements by clicking the Delete icon.
• save your changes by clicking Save, or revert to the original settings by clicking Cancel.