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

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.

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 Frame / Element

Select Frame / 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.

Click Element by JS

Click Element by JS 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

Save Table Element 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 Dropdown

Select 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.

How to Find Locators on Your Webpage

Chrome - ChroPath

Step 1: Install ChroPath

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

Step 2: Open Chrome DevTools

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

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.

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

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

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.

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.