Using Web Mode

Automation of a web application using the WEB MODE highlights the area that you can capture for configuration. Once the area is captured, perform the relevant action using the out-of-box interactions available. Scenarios where the WEB MODE does not work as expected, you can even switch between WINDOWS MODE and IMAGE MODE to configure the field.  Following are the instructions to perform field configuration using the WEB MODE:

 

  1. Use the  (Settings) icon of the required Application activity to launch Multimodal Interface and the configured application. By default WEB MODE is set. See Web Application automation to know how to use the activity.
  2. Click the (Play) button to capture the steps that you want to perform within the web application. The application opens and the Play button changes to the  (Recording) button.

 

 

  1. Hover over the field that you want to capture. The field gets highlighted with red box.

 

 

  1. Click the highlighted area. The Field Properties panel of the Web Mode appears. The fields that are mandatory are highlighted with red box.

 

 

  1. In the Action list, select the action that you want to perform on the captured area. Other mandatory fields change depending on your selection from the drop down list. Enter the required details. Refer Field Properties table to know more about the available fields and their respective properties.
  2. Click the  (Save) icon to configure the actions and other related fields.
  3. Repeat step 2 through 6 to capture all the steps involved in the process. The fields configured and saved appears in the Saved pane of the Field Properties panel. You can edit or delete these steps in the Saved pane.
  4. Click the   (Save configured field and return to studio) icon to save the field that you configured and return to the Studio menu.
    The fields related to Web MODE are configured.

 

Web Mode Control Behavior and Field Descriptions


The properties of Web Mode fields are listed in the following table:

 

Property Name

Usage

Control Behavior

Action

It is the action or the interaction that can be performed on a web based application depending on the type of UI element as per the requirement. Available options are:

  • Control Exists- Checks if the UI element exists at the specified area. It is useful when working with dynamics controls.
  • Wait Until Exists-  Waits until the UI element is found. You can use this to avoid any delay in the page loading time. This interaction returns a Boolean value of true or false (on success or failure respectively) on finding the image. The Boolean value can be set to a variable and checked in a conditional statement to perform an appropriate action after finding the web element.
  • Click- Allows to left click the selected UI element.
  • Open Context Menu - Opens the context menu that appears on an interaction such as a right-click.
  • Double Click- Performs double click on the selected UI element.
  • Get Value-  Extracts the current value of the selected UI element such as, value of an input field , text box or selected area.
  • Get Attribute- Extracts the attribute's value of the selected UI element.
  • Get Text- Retrieves text from the selected UI element.
  • MouseOver- Hovers the mouse over the selected UI element.
  • Scroll By- Scrolls to particular section of the web page horizontally or vertically.
  • Scroll Into View- Scrolls to bring the application area viewable on screen of the web browser.
  • Set Value- Sets the user provided value of the UI element attribute and stores it as the value of the parameter. You must define the parameter in the Parameter bar before you start capturing the element.
  • Set Attribute- Sets the user provided attribute for the specified UI element and stores the provided value of the attribute into a parameter. You must define the parameter in the Parameter bar before you start capturing the element.
  • Click NoWait- Allows to click the selected UI element and move to the next activity without waiting for the page to load.
  • SendKeys- Captures input of the selected UI element from the keyboard. The input can be a combination of keys or text input from the keyboard. Use this option when a keystroke needs to be automated on a specific web element and not on the overall application.
  • Shift Click- It appears only when you want to capture action on a button or a link. This interaction opens the URL associated with the selected link or the button in a new window.

    NOTE: 

    		 If you are using the Shift Click key enhancement for the first time, you must update the URL in the Target Url section correctly.

     

Interaction

The corresponding interaction set against the selected action.

Appears if Action selected is SendKeys.

Keys

The key sent as input from the keyboard. It can be a combination of keys or a text.  

To configure the keys:

  1. Once Action selected is SendKeys, click the (Configure) icon. The SendKey Configuration dialog box appears.

 

 

  1. In the Select Function Keys(Max 3) list, select the keys from the keyboard to create the key combination. You can select upto maximum of three keys.
  2. In the Input Key(optional) filed, enter an alphabetical or a numeric key to create the combination. This is an optional field.
  3. Click CONFIRM.
    The configuration for SendKeys action is done.

Appears if Action selected is Get Attribute and Set Attribute.

Attribute

Sub attributes or the properties of the html attribute selected.

Appears if Action selected is Set Value, Set Attribute.

Input Source

The input value that must be provided. You must define a parameter in the Parameter bar to use this option.

Select the checkbox beside Input Source, and enter the input value, if you want to set a default value.

Appears if Action selected is Scroll By.

XAxis

Vertical  scroll on the web page. The value must be entered in pixels.

YAxis

Horizontal scroll on the web page. The value must be entered in pixels.

Appears if Action selected is Scroll Into View.

Scroll To

 Determines the area till where the scroll must be done. Available options are:

  • Start
  • Center
  • End

Note: Internet Explorer does not support Centre option, so configuring center for ScrollTo displays exception at runtime.

Dock Window

This section appears only when Action selected is Shift Click.

Dock Action

When a link or button on the web page is opened in a new browser window, the Dock Action button enables the new window listed in the multimodal UI. You can select one of the windows in the multimodal UI to configure controls on the intended window.

Interaction Attributes

This section appears only when Action selected is Shift Click.

Tab Name

Name of the new window when it is docked in Engage application.

Target Url

Following are the two ways to update the input URL:

  • Enter the URL of the new window that opens when Shift Click is selected in Action in the Target Url.
  • You can configure either URL or argument as per requirement. You can create argument with target URL in the argument section and then, enter the argument name when Shift Click is selected in Action.

NOTE: 

 This feature supports Chrome, Firefox. Edge and Edge with IE compatibility mode browser.

Use Mouse

Performs left click of the mouse on the link or the button to open in the new browser window.

Field Properties

Control Tag

User specified identifier of the selected UI element.

Control Type

Control type of the UI element as defined by the developer.

Display Name

User specified display name of the action configured.

Find By

Locator of the UI element on a web application.

Identifying the correct element forms one of the first step towards creating an automation workflow. Available options are:

 

 

  • id- identifier of the UI element. It is useful for locating elements that has a unique id associated with it.
  • name- field name of the UI element. Each element on the web page has a name assigned to it that can be used to select the intended element.
  • css3selector- part of the CSS rule that uses selectors such as tags, class, pseudo-element, pseudo-class, combination of selectors and other wide range of selectors to identify the UI element.
  • manual- provides manual way of identifying the UI element.
  • innertext - Depending on the html tagging, css3xpath can also be available in this list. It returns the text content of the UI element and its descendants. It can be used with the elements that have a dynamic Id, name, or selector but its property value remains deterministic. Some of the examples of innerext values are, Search, *Search, *Search* and Search* that is equivalent to equals, starts with, contains and, ends with respectively.
  • sclocator - This option is available if an application is automated having Smart Google Web Toolkit (GWT) platform. Support for sclocator is available in Selenium based plugins viz. InternetExplorerSelenium, Chrome, and Firefox.
  • shadow-path - This options is available if an application is automated having a Shadow DOM.

You can configure backup selectors to avoid situations where the automation process is unable to find the primary selector. This is not a mandatory step.

Follow the instructions to configure the backup selectors:

  1. Click the (Configure) icon. The Configure Selectors dialog page opens.

 

 

  1. Select the additional selectors.
    1. If the selector is manual:

       

       

      1. Click the (pencil) icon to configure the manual selector. The Configure Selector dialog box appears.

         


      2. In the Select Attribute list, select the attribute of the manual selector, Available options are- class, offset and loopselectorgenerated.
      3. In the Value list, either select a parameter containing the value of the Attribute selected or select the check box to set a default value.
      4. In the Condition list, select the condition of the selector. Available options are- Equals, Contains, Starts With and Ends With.
      5. The Generated Selector field displays the default value generated, if any. You can click Add to add this value in the Selector field.
      6. In the Selector list.
      7. Click CONFIRM.
  2. In the Value field enter the required query.
  3. Drag the selector and drop to change the sequence to rearrange the default order.
  4. Click CONFIRM to save the configuration.
Find By Coordinates Checkbox coordinate property to get the relative coordinate position of the control (internally). By default, Find By Coordinates is not selected.
Appears if Find By Coordinates is selected.
Focus Window Checkbox to set focus. To bring the control in focus.

Appears if Action selected is Control Exists, Get Attribute.

Is C-View

Is applicable only for AssistEdge Engage.

If selected, the field configuration captured in Automation Studio is visible in the Engage C-View tab.

Tab Number

The window tab on which you want to perform automation.

Appears if Action selected is Control Exists, Get Attribute.

Variable Name

User defined name of the variable that stores the captured value. You can define the variable name here itself or predefine it in the Parameter bar.

Appears if Action selected is Control Exists, Get Attribute

Variable Type

Type of the variable defined. Available options are:

  • Text - A sequence of character, either as a constant or a variable.
  • Numeric - An integer type that range from negative through positive.
  • Decimal - An exact numeric value defined by its precision and scale.
  • Boolean - A data type used for making decision. Can have only two values- true or false.
  • Data Table - A data type that stores tabular data.

Misc

FrameNo

Number of the frame of the web page where you want to perform the action. Automation Studio automatically detects the frame number based on the area selected during configuration.

Item Index

Index number of the selected item on the web page.

Item Offset

The distance between the target item and the anchor.

 

 

 

 

Custom Path for Selenium Driver

Selenium drivers are located in the AE client tool/ProtonFiles folder. If you want to use the selenium drivers from custom path apart from the AE client tools dedicated path for the selenium drivers then, these settings can be used. If the keys for the selenium driver are added, the respective client tools will use the selenium driver based on the value in the configuration file.

By default, these keys are not present in the configuration file. You can manually add the key in the <primarysettings>parametes> section to the configuration files mentioned below:

  • Automation Studio > Automation Studio.exe.config.
  • EnterprisePersonalAssistant > EnterprisePersonalAssistant.exe.config.
  • Engage > Engage.exe.config.
  • Robot > RobotAgent > Robot.exe.config.

Adding Key in the Automation Studio


To add keys in the Automation Studio configuration files:

  1. Install the Automation Studio on your machine. To know how to install the Automation Studio, see the Client Tools section .
  2. Open the Automation Studio.exe.config file from the Automation Studio folder.
  3. Add the key manually in the section, as shown below.

  4. Save the Automation Studio.exe.config file.


You can provide any custom path as a key for the selenium driver.

 

NOTE: 

 If the keys for the Selenium driver are added in the configuration file, the prerequisite checker will not work. For more information on the prerequisite checker, see the Prerequisite Checker section.