All the controls that are recorded using Jiffy UI Learn get listed in UI controls tab. You can also manually add UI controls and edit the existing UI controls for any changes in the recorded control of the UI pages.

1. Click the icon on the attribute pane of the node.
2. Select the UI Control option to display the UI Control tab.

UI Controls tab displays Name, Created by, Updated On, Type, Mode, Module, and Action of each UI Control.

Create UI Control

1. Click the icon to add a new UI Control.

2. Specify the following details in the Add UI Control window.

   • Name: An intuitively appropriate name for the control.
   • Module: All modules created in the HyperApp are listed. Select the required application from the drop-down.
   • Type: Select the Type of UI control to be created, for example, Submit:WEB, Select:Web
     

3. Click the Save button.

Edit UI Control

Click the icon against the UI Component you wish to modify:

1. Edit the fields Description, Element Type, Module, and Closeness Percentage, as required.
2. Change mode from Static to Dynamic, if required.
3. Click the Save button.

Change Mode from Static to Dynamic

Dynamic Control based automation is used in scenarios where the control changes dynamically during execution. UI Controls can be of Static or Dynamic type.

• Static: Non-editable element captured as a constant.
• Dynamic: Recorded controls are made Dynamic using the values passed to them.

By default, mode of any UIControl is Static. You can change it to Dynamic from the Edit UIControl window. The two approaches for dynamic execution are:

• Parameter based
• Dynamic scripting

Parameter Based

When you want the UIControl to be dynamic based on the value that is passed to it from the Actions tab during execution, use parameters passed recording. Depending on the context of the business scenario, XPath of the UI control changes based on the parameter value. You can enter the values for the variable in the Actions tab as input parameters to the UI event.

In Flight Booking, mode of UI element One-way is changed to Dynamic with Variable Name as TripType.
In Actions tab, based on the value passed to the variable, One-way, Two-way, or Round trip, from the travel booking request, the selection of the control differs.
During execution, the control selection differs based on the variable value passed.

1. Click the Make Dynamic option. Make Dynamic window opens.
2. Enter the recorded predefined text to be replaced in the Target Text field.
3. Enter an intuitive name in the Variable Name field.
4. Click the SAVE button.

The UIControl is now dynamic. The target text gets replaced by the variable name in all the properties that were captured.

During Task design, in Actions tab, you can provide value for the variable.

During execution, the variable value is picked and executed based on the variable value passed.

Dynamic Scripting

If you wish to completely overwrite the recorded values, use customized code to interact with the target application and find the required UI Element.

1. Select Dynamic from the Type drop-down.
2. Enable Use Dynamic Script option in the Edit UIControl window.
3. Write Python selenium scripts in the Dynamic Script field, based on your requirement.
4. Click the + icon and enter the Variable Name, if using parameters in the Dynamic Script.

Use dynamic scripting to find fare of the preferred airlines.

• Use driver = self.engine.get_driver() code to get the web driver object.
• Use driver.find_elements_by_xpath(x) code to find an element with xpath for solutionPrice.

x =‘//div//img[@alt=‘+’“‘+Flight+’”‘+’]/../../../../..//div[@data-ct-handle=“solutionPrice”]/p’
driver=self.engine.get_driver()
elementm=driver.find_elements_by_xpath(x)
print(elm)
print(x)
return elementm[int(index)]