Using Web UI Steps

Flow’s Web UI steps allow you to interact with elements on a website. You can use the Process Editor to design processes that automate interacting with website elements, such as filling out a form or making an order.

In this tutorial, we’ll go over:

• Where to find the Web UI steps in Flow’s Process Editor
• What locators are and why most Web UI steps need them
• What each Web UI step does

Let’s dive in!

Finding the Web UI steps

When you have the Process Editor open in Flow, look at the Step Library to the right. Web UI will be the last category.

Now that you know where to find these steps, let’s quickly go over some common fields that most of these steps share.

Common Fields: Locators

To interact with elements on a website, we have to use locators, which are simply ways for Symphona to identify elements on a page.

Flow provides five locator types for you to identify and interact with elements. These include:

• ID: locate a webpage element using its ID attribute
• CLASS: locate a webpage element using its class attribute
• NAME: locate a webpage element using its name attribute
• CSS_SELECTOR: locate a webpage element using a CSS attribute
• XPATH: locate a webpage element by using its xpath (the path taken in XML to reach the element you want)
• Currently we support only relative X-Paths
• DOM: locate a webpage element by using its dom attribute

For most of the following Web UI Steps, you’ll be asked to select the Locator Type and then provide the Locator Value of the element you want to identify.

For example, if you want to interact with the “First Name” element of a webpage, you could:

• Select “ID” as the Locator Type and then input its ID (e.g. “fname”)
• Select “NAME” as the locator Type and input its Name (“First Name”)

Let’s now go over how to use each of the the Web UI delegate steps.

Web UI Steps

Note: most of these steps will require a Locator Type and a Locator Value, so Flow will know what element you’re trying to access. If a step doesn’t have these fields (or has extra fields), it will be mentioned in its section.

To create a flow of delegated Web UI steps, you must first drag-and-drop a Start Web UI Automation step.

Start Web UI Automation

Start Web UI Automation communicates to Flow that you’re setting up a Web UI automation. It will be the first step in your Web UI automation flow. Deleting this step will delete any Web UI steps attached to it.

You cannot attach Web UI steps to anything else except a “Start Web UI automation” step or a Web UI step that is in a flow attached to a “Start Web UI automation' step.

This step has no fields to fill out.

Once you’ve added this step, you can set up a customized series of Web UI steps, depending on what process you’re trying to automate. Below are the available steps for you to use.

Action Steps

Click Element

Click Element allows you to click a selected element.

Fill Form

Fill Form allows you to fill out fields of a selected form on a webpage. You can set up multiple parameters to fill out multiple fields at once.

Fill Form works a little differently from the other steps. In its settings under Output Configuration, you can set up the Form Fields you want to fill out, where you want to fill them, and what you want to fill them with.

By clicking Add a New Parameter, you’ll be asked for the Input text, Locator Type, and Locator Value. The Input text field will include whatever you want to fill the field with. Use the Locator Type and Locator Value to access the specific field of a form.

Once you’ve set up that parameter, you can do it again for another field of a form. Through this, you can partially or fully fill out a form automatically.

Sleep

Sleep pauses execution for a given period of time. This can be useful when you need to wait for pages to load.

There are no locator fields here. The only field to fill out here is Sleep Time, which is measured in seconds. Input the amount of seconds you want Flow to wait before executing the next step.

Open URL

Open URL opens a URL chosen by the user.

There are no locator fields here. The only field to fill out here is Website URL. Paste the URL of the website you want to open.

Take Screenshot

Take Screenshot takes a screenshot of the webpage. There are no fields to fill here.

Input Text

Input Text inputs custom text into a selected element, based on user input.

Similar to Fill Form, Input Text asks the users to fill out three fields: Input text, Locator Type, and Locator Value. Use the Locator Type and Locator Value to specify where you want Flow to input the contents of the Input text field.

Clear Text

Clear Text clears text from a selected element.

Select iFrame / Element

Select iFrame / Element allows users to select and interact with a specified webpage element.

Extract Element

Extract Element allows users to grab values in UI elements for use in later automation steps.

Once you indicate the element you want Flow to access, you need to fill out the Extraction Value field, which will be the specific value you want to grab from the element.

Force Click Element

Force Click Element allows users to click on JavaScript objects. This can be useful if Click Element doesn’t work (usually because the HTML element is larger than the JavaScript object).

There are no locators for this step. You’ll need to provide an Xpath.

Save Table Element to Excel

Save Table Element to Excel allows users to grab HTML tables with the <table> tag for use in later automation steps. It will save the table as a HTML file.

Along with the locator fields, you’ll need to give a filename. Flow will save the table you grab under that filename.

Upload file

Upload file allows you to upload files during your automation steps.

Along with the locator fields, the user will need to fill out the File id they want to upload.

Select From Dropdown

Select From Dropdown allows you to select and click a dropdown element on your webpage.

Once Flow identifies the specified dropdown menu using the locator fields, the user will need to specify the Dropdown Value they want to input.

Select Checkbox

Select Checkbox allows you to select and click a checkbox on your webpage.

Download File

Trigger a file download based on the Element of the web element to trigger file download.

Random Number In Range

Generate a random number in a specified range to a variable that can be later used in the process.

Scroll Element Into View

Scroll the page until the Element is displayed on the screen.

Unselect IFrame

Removes focus from the frame previously selected.

Random Variable Based on Time

Generate a random variable to a variable that can be later used in the process.

Extract Last Value By Delimiter

Extracts value from a string so that extra text can be removed. Stored in a variable that can be later used in the process.

Extract URL Variable

Extracts the current URL to a variable that can be later used in the process.

Press Key From Keyboard

Presses a key once an Element has been selected.

Switch Window

Switches to a new window or goes back to the main window.

Execute JavaScript

Executes a JavaScript Command.

Validation Steps

Validate Element Exists

Checks if an Element is present in the page.

Validate Element Does Not Exist

Checks if an Element is NOT present in the page.

Validate Text Exist

Checks if specified text is present in the page.

Validate Text Does Not Exist

Checks if specified text is NOT present in the page.

Validate Element Contains Text

Checks if an Element contains specified text in the page.

Validate Element Does Not Contain Text

Checks if an Element DOES NOT contain specified text in the page.

Handle Alert

Checks if an Element is present in the page.

How to Find Locators on Your Webpage

Chrome - ChroPath

Step 1: Install ChroPath

1. Go to the Chrome Web Store: Open Chrome, navigate to the Chrome Web Store, and search for "ChroPath".
2. Add to Chrome: Find the ChroPath extension in the search results and click on the "Add to Chrome" button.
3. Confirm Installation: A popup will appear asking you to confirm the addition of ChroPath. Click "Add extension".

Step 2: Open Chrome DevTools

1. Access DevTools: Right-click on any web page and select "Inspect" from the context menu.

2. Find ChroPath: Click on the '>>' icon or the 'Customize and control DevTools' menu (three dots) if you don't see ChroPath directly in the tab menu. Select "ChroPath" from the dropdown.

3. View Generated Selectors: Once an element is selected, ChroPath will automatically generate and display various selectors for it, including XPath, CSS, and others in the ChroPath panel.

Step 3: Copying Selectors

1. Copy a Selector: Hover over the generated selector you wish to use. Click the copy icon next to it to copy the selector to your clipboard.

Manually

1. You right click on the element you want to locate and you choose the option "Inspect", this will open the developer tools and the given line of the HTML code will be highlighted.

1. Right click on the line and choose the option copy XPATH or CSS locator depending on the type of locator that you want to obtain.

• Using Web UI Steps
• Finding the Web UI steps
• Common Fields: Locators
• Web UI Steps
• Start Web UI Automation
• Action Steps
• Click Element
• Fill Form
• Sleep
• Open URL
• Take Screenshot
• Input Text
• Clear Text
• Select iFrame / Element
• Extract Element
• Force Click Element
• Save Table Element to Excel
• Upload file
• Select From Dropdown
• Select Checkbox
• Download File
• Random Number In Range
• Scroll Element Into View
• Unselect IFrame
• Random Variable Based on Time
• Extract Last Value By Delimiter
• Extract URL Variable
• Press Key From Keyboard
• Switch Window
• Execute JavaScript
• Validation Steps
• Validate Element Exists
• Validate Element Does Not Exist
• Validate Text Exist
• Validate Text Does Not Exist
• Validate Element Contains Text
• Validate Element Does Not Contain Text
• Handle Alert
• How to Find Locators on Your Webpage
• Chrome - ChroPath
• Step 1: Install ChroPath
• Step 2: Open Chrome DevTools
• Step 3: Copying Selectors
• Manually