Flowcharts Controller

The Add Step dialog has an Inspect Element tab where we can identify and interact with the application. To work with the application and identify elements, we can keep the application window and Flowcharts window side by side.
However since the Flowcharts window is big, this can be inconvenient - especially on Mac, since focus is needed to interact with the browser.

Flowcharts Controller solves this problem.

In-Page Controller

Flowcharts Controller can be launched from a web application using ALT + Double Click (pressing ALT key and Double Clicking) on the page.
For Mac, use Alt/Option + Double Click.

This will open a Controller inside the page itself.

Controller Functionality

• CTRL + Hover on any element on the UI, will show the UI Element, UI Element Value, Window/Domain Prefix and Mode.
• The Controller can be dragged around inside the window to allow identification of elements underneath it
• Clicking the Highlight button will highlight the UI Element on the application
• To identify one element relative to another, CTRL + Hover on the first element, Press the Anchor button, then CTRL + Hover on the second element.
  The second element will be identified relative to the first element
• Use the Up arrow to identify the Parent element
• Use the Down arrow to traverse back to the child
• The Copy button copies the element from UI Element text field to Script box
• Actions are available in Actions dropdown
  Choose an action and then press the Run Step button.
  The action will be executed on the Application window and the result will be visible in the textbox below.
• Clicking on Add Step button will add it to the opened Keyword in Automate Dialog on Flowcharts UI.
• Clicking the Script checkbox will show a textarea (Script box) for interacting using Sahi Script.
  If Script is checked, Run Step will execute the code in the Script box.
  If Script is checked, Add Step will add the code in the Script box as a Raw Script Step
• Clicking on List Properties button will list the properties of UI Element.
  
  This will also show 3 new buttons: Assert, Store and Create UI Element.
  
  • Select desired properties and click the Create UI Element button to create a custom UI element based on the selected properties.
  • Click the Assert button to add steps for asserting the value of selected properties in the opened Keyword in Automate Dialog on Flowcharts UI
  • Click the Store button to add steps for storing the value of selected properties in the opened Keyword in Automate Dialog on Flowcharts UI
  • Some properties are hidden as they are not useful for creating custom UI Elements, click the arrow button to show them

Pop-out Controller

When working with multiple browser windows or when working with other modes, we may need the Controller to be separate from the web application window.

• On a browser, the Controller can be popped out by clicking on the Controller Popout button on the top right of the in-page Controller.
• For other modes, the Controller can be launched by clicking on Open Controller option under Launch button dropdown.

Anchor Button & Relation API

Relation APIs let Sahi relate one element to another.

• The Anchor button helps to identify the element with relation to the position of another element.
• By default near and in relation API's are used for element identification.
• To use a specific relation API for an anchor element, such as leftOf, rightOf, under, above etc., click the dropdown arrow next to the Anchor button.
• To select multiple anchor elements, you can use additional anchor element identification mechanisms

Identify an element with relation to anoher element:

Steps:

1. First identify the relative element by CTRL + Mouse hover method.
   • Example: Identify the label 'First Name'
2. To use Relation API, press the Anchor button. The relative element will be added to anchor elements list.

3. Next, identify the required element using the same CTRL + Mouse hover method.
   • Example: Identify the text box 'firstname'

4. Click on the dropdown arrow near anchor button to see list of anchor elements.

5. For each anchor element a specific relation API can be selected and offset can also be given if needed.
   • If no relation API has been selected for an anchor element then it will not be used during identification.
6. CTRL + Hover over the next element, it will generate an accessor with the selected anchor elements and there relation APIs.
   • If it fails to identify the element with given relations, then an error will be generated in the accessor field.

Use multiple Anchor elements:

Steps:

1. Identify the element with relation to an element.
   • Example: Identify the 'MP3 Player' to be rightOf to 'Cameras'.

2. Now, identify the same element with relation to another element.
   • Example: Identify the 'MP3 player' to be inside the 'Nav Bar'.

3. Similarly more layers of relative identification can be used.