The Web UI node is used to automate web-based applications.

Familiarizing The Web Application

Jiffy UI automation framework allows user to automate user interface pages for any application. Consider a scenario of automating a website.

Setting Up Web UI Configuration

To start with Web UI automation, the user needs to set the configurations of the web application first. To set the configurations, do the following:

1. Double-click on the Web UI node and then click on the Configurations tab.

2. To create a new Web Application, click on the New Web Application radio button. Add the following details:

   • App: Type the Web URL to be automated. Alternatively, the URL can be selected from the App dropdown. The URLs that are currently open in the browser are listed here.
   • App Name: Type the desired name of the web application. This value is specific to the web application.
   • Browser: The browser can be selected based on the following options:
     • If the URL is selected from the existing list, then the corresponding browser will get selected and displayed by default.
     • The desired browser can be selected from the Browser dropdown menu when you typed in the URL details. Choose any one of the following options from this drop-down based on the requirement:
       • Internet Explorer
       • Chrome
       • Chrome Depricated - The tasks that have been migrated from the previous versions of Jiffy can use this option to execute the tasks.
         

         If the web application is open in two browsers (for example, Chrome and Internet Explorer), then an option will be given to select the desired browser.

         
         
   • Cluster: Select the required cluster from this drop-down. This is applicable only when the task is being executed using an Execution Bot

     Leave cluster name blank when the task is being executed using a Developer Bot.

   • Authenticate: Few web applications require authentication for launching a web page. In that case provide username and password.

3. Alternatively, the user can select any existing web application in the Web Application drop-down if it matches the criteria of the user.

4. Click on the CREATE & RECORD button to create the web application and begin recording the web application.

   After the App and the Configuration are created, if the App name is SearchFlight, the name of the Configuration will be concatenated with the App name and type of UI automation. Eg: SearchFlight_Web

5. Alternatively, select any existing configuration in the Configuration drop-down if it matches the criteria of the user.

6. The user can also edit, copy or delete the existing configuration by clicking on the Edit, Copy and Delete icons displayed against each configuration, respectively.

7. The created confirguration will be listed in the Configuration tab.

Recording The Web Application

After creating the web application, the steps for automation need to be recorded. Recording can be either of the following ways:

1. Click on the RECORD button in the Configurations tab.
2. Click on the Start Recording button in the Actions tab.

3. Click on the CREATE & RECORD button while creating a new Application.

   The Developer Bot must be running while recording the web application. Read how to start the Developer Bot here.

   After the recording begins, a Jiffy UILearn tab opens. Do the following to continue with the recording:

4. On clicking the RECORD button, a floating window of Jiffy UILearn opens for recording the actions performed on the required fields in the web application based on the URL mentioned in the Configuration tab which will be captured as the UI controls.

   Make sure that the website to be recorded is open in the browser before starting the recording. The UI Learn floating window can be minimized, maximized and closed using the buttons provided on the right top corner of the Jiffy UILearn floating window.

5. Give a name for the Screen Ex: Screen1

6. Learn the UI elements by placing the mouse pointer on the required field and then pressing the ctrl key. The selected UI element will be highlighted in Red colour.

7. The controls familiarized will be listed under the Screen1 screen. The names and actions of the controls can be edited as required.

   For the Flight Booking application, click on One way, Flying from, Flying to, Departing, Close button of Date picker and Search options to record them.

8. To record different types of UI elements like image, text or table, click on the Other Recording button and choose the required option. Read Familiarizing UI Elements for more information.

9. Click on the Stop Recording button on the Jiffy UILearn floating window after recording is completed. The familiarized UI controls are listed under the Actions tab of the Web UI node.

10. Edit the lines of action that are recorded to finetune the performance of the web application as required. Read how to Design the web application.

Variables & Table Definition

Read about Variables and Table Definition to know more.

Properties Of Web UI Node

General Properties

1. Name: Name of the node. A default name is displayed in this field, which the user can edit according to the task and the intent of using the node.
2. Description: A short note on the purpose of the node.
3. Close Application: After completion of Web UI run, then it will close the web application that is launched during the execution of the task when the Close Application toggle button is in ON state. When the user wants to retain a web application to perform actions on it, then select the Close Application toggle button must be in OFF state.
4. Close Application on Error: If it is ON, then the web application or website which is launched during execution will close in case of any error in the flow of execution.
5. Mark run Failure on Node Fail: When the Mark run Failure on Node Fail field is ON, if the node execution fails then the complete task execution is marked as fail.
6. Continue on Failure: When the Continue on Failure field is ON, even if the node fails, the execution will continue to the next node. When the Continue on Failure field is OFF, if the node fails, the execution will not continue to the next node.

Advanced Properties

1. Run Mode: The user can select any one of the following options from the Run Mode drop-down:
   1. Run if locked: The task runs even if the machine is locked.
   2. Unlock and run: Unlocks the machine and runs the task.
2. Lock After Run: Locks the machine after the node execution.
3. Take Screen Shots: The user can select either Always or On Error option.
   • If the user selects Always, then the user can see the screenshot of every UI event step output in the form of images (web application) after a run.
   • If the user selects On Error, the user can see the screenshot of the step which is failed. In case of any popup messages or any crash on the web application, the user can identify it from the screenshot. These images can be passed to next node for further use.
   • If the user selects Off, no screenshots will be taken during the execution.

Refer to Excel-Web Automation sample task to know how to use Web node in a task.