Automating the UI

Automation of the UI is done in Axiom by using the "Interact with a page's interface" step. This step creates a UI interaction bot, which can visit webpages, click on links and buttons, or enter text into web forms. Once you have added this step, you then configure the UI interaction bot by adding sub steps to it.

# Automate the UI

To add the "Interact with a page's interface" step, click the "+ Add a step" to add a new step and select it in the list.

The first thing you will need to do is to fill out the URL to start with, so the UI interaction bot knows where to begin. To do this a "Go to a page" sub step is immediately added. Add the URL you want to this box, or click the "Get current URL" button to grab the current URL from the page:

interact_with_pages_interface.gif

Once this is done, further sub steps can be added to the UI interaction bot by clicking the "Add step to UI interaction" button:

add_a_substep.png

This works the same as adding a normal step, except that the options given are specific to the UI interaction bot. These include the UI interactions you want the bot to perform, such as clicking or entering text into fields.

The web scraper is also available as a sub step, and works exactly as described in Scrape a page (opens new window).

# Fill in a web form

To fill in a web form, first create a UI interaction bot by adding the "Interact with a page's interface" step, as described in Automate the UI (opens new window):

  1. To enter text into a field, click the "Add a sub step" button, and select the "Enter text" sub step.

select_text_field.gif

  1. Click "Select text field" to load the selector interface. Click on the field you want to enter text into on the page, and enter the text you want to place within the field. If you wish to use data from a previous step, you can select it from the "Insert Data" dropdown, then select the column you want from the preview.

enter_text_token.png

  1. Once you have set up the fields as you require, you can get the UI bot to submit the form by clicking "Add a sub step", selecting the "Click" sub step, and then selecting the submit button from the page.
  2. You can use the "Press key(s)" sub step to interact with more complex elements, such as drop downs. This is done by first clicking on the element you want to select by choosing the "Click" sub step, and then,once this is configured, adding a "Press key(s)" sub step. Click "Record" and press the required keys on your keyboard, usually the "down" cursor to select a particular item.

# Loop through data

In Loop through pages and scrape (opens new window), we showed you how you can set up a scraper to loop through a list of pages.

This looping concept can be applied more generally. In fact, you can loop through any data using the method described there.

When adding data for the first time to any sub step within an "Interact with the page's interface" step, Axiom will automatically create a loop - you can see this in the UI by the "Looping through: [data-name]" text and graphic. The sub steps within the "Interact with a page's interface" step will then repeat once for each row in the given data, exactly like a for loop in a programming language like Python.

Alternatively, you can enter the data manually by clicking the header of the "Interact with a page's interface" step and inserting the data you would like to loop through using the yellow "Loop through data" dropdown. This is useful when you want Axiom to loop a certain number of times (one for each row of the data) but do not wish to actually use any of the passed data in the automation.

Note that the "Interact with a page's interface" step can only loop through one set of data at a time. For more complicated looping structures, see Conditional logic and looping (opens new window).

# Scrape in a loop

You can use the web scraper as a sub step within the "Interact with a page's interface" step. The scraper works exactly as described in Scrape a page (opens new window), but with a few differences.

Firstly, the default limit on the results scraped is set to one row. This is usually what is wanted, but can be changed easily as described above.

Secondly, when adding multiple scrape sub steps to the "Interact with a page's interface" step, Axiom will automatically join the data extracted by the scrapes together into the same row. A new row is created every time the "Interact with a page's interface" step loops.

For example, if you created one scraper sub step that scraped the following data:

A B
John Smith 10 Garboldesham Lane

And a second scraper sub step which scraped this:

A B
0800170594 jsmith@somecompany.com

In the data produced by the "Interact with a page's interface" step, these two data would be automatically joined into:

A B C D
John Smith 10 Garboldesham Lane 0800170594 jsmith@somecompany.com

On the next loop it would start a new row, and continue in this fashion until finished.

This behaviour is most commonly used with scrapers, and is useful if you need to perform clicks or some other step to access data on a page. However, it applies to any step used. For example, the same thing happens with custom javascript that returns data, or to the results of a "Current Url" step; these are also appended to the same row within a loop.

# Automate select lists

Axiom’s select list feature can be used to select options from simple dropdown menus where the HTML is structured using the <select> and <option> elements. If the dropdown does not conform to the select HTML element, there are alternative ways to interact with it effectively.

# Use Select list step

The “Select list step” instructs the bot to choose a value from a select list or dropdown form field:

  1. Once the page is loaded, Axiom helps you find the dropdown list on the page. It looks for the specific HTML code that represents the dropdown.
  2. You can tell Axiom which option you want to choose. For example, if the dropdown has options like "Red," "Green," and "Blue," you can tell Axiom to select "Green."
  3. Axiom simulates the action of selecting "Green" from the dropdown list by clicking on the appropriate option for you.
  4. When Axiom finds the dropdown and the option you specified, it successfully selects the option. If something goes wrong, like if the dropdown or the option doesn't exist, Axiom will let you know.

To use the select list step:

  1. Within the “Interact with page’s interface” step, click the “Add a substep” button
  2. Choose “Select List” in the step listing
  3. Click “Select” and choose the dropdown menu.
  4. In the “Text” field add the value for the bot to select.

select list.gif

# Use Click Element and Enter text

Below is another example of how to automate dropdown selection using a combination of “Click Element” and “Enter text” steps in Axiom:

  1. Within the “Interact with page’s interface” step, click the “Add a substep” button.
  2. Choose “Click Element” in the step listing.
  3. Click “Select” and choose the dropdown menu.
  4. Using the “Add a substep” button, add “Enter text” step.
  5. In the “Text” field add the value for the bot to select.

click_element_enter_text.gif

# Use Enter text

In certain cases, you can select an option in a dropdown field by simply typing the desired text. The dropdown will automatically filter and highlight the closest match based on the text entered:

  1. Within the “Interact with page’s interface” step, click the “Add a substep” button.
  2. Choose “Enter” in the step listing.
  3. Click “Select” and choose the dropdown menu element.
  4. In the “Text” field add the value for the bot to select.

Enter text.png

# Use Click Element and Press keys steps

It is also possible to select an option in a dropdown menu using Axiom by combining the 'Click Element' with the 'Key presses' step. The process involves first triggering a click event on the dropdown field to expose the options, then emulating keyboard arrow key presses to navigate through the options, and finally using the 'Enter' key press to select the desired option. This approach essentially replicates the natural user interaction with a dropdown menu on a web page:

  1. Within the “Interact with page’s interface” step, click the “Add a substep” button.
  2. Choose “Click Element” in the step listing.
  3. Click “Select” and choose the dropdown menu.
  4. Using the “Add a substep” button, add “Key presses” step.
  5. Record the desired keypresses, such as several “Arrow down” and “Enter” to choose the desired option.

click_press_keys.gif

# Use the keyboard

Where it is possible to use the keyboard, it is recommended to do so. In general, using keyboard shortcuts with web applications is faster and works more reliably than complex sequences of clicks - so if an application offers keyboard shortcuts, use them in your automations!

The main way to use the keyboard is using the "Press Key(s)" sub step within the "Interact with a page's interface" step. There are two ways to use this step: by recording keypresses directly; or by using data to pass in the keys to press (useful if these need to be dynamically generated).

Rather than selecting inputs with the 'Enter Text' command, you can 'Press Key(s)' and input one or more Tab characters. If you do this, when creating your 'Enter Text' sub step do not select an element.

# Record key presses

To record keypresses, add the "Press Key(s)" sub step to the "Interact with a page's interface" step. Once it is added, you should see a red record button; click this to begin recording keypresses. While Axiom is recording, whatever key you press will be stored. Click the "Stop" button to stop recording. When your bot runs, this sequence of keypresses will be played back.

press_keys.gif

Usually, the keys are pressed in sequence. However, there is an exception for the Control, Alt and Shift keys; these are held down until the next keypress. So if "Control, N, Enter" is recorded into the "Press Key(s)" widget, when Axiom runs it will play back "Control+N, Enter" when it runs.

# Use data

The second way to use the "Press Key(s)" sub step is to use data. This allows you to dynamically pass in the keys to be pressed based on another data source. Like all data, select the token you wish to use by clicking the yellow "Insert data" dropdown.

When using data, you must specify a delimiter so that Axiom knows how to understand the information it is getting. The default delimiter is "||", but it can be set to any value you wish. Each key to press should be separated by this delimiter.

For example, if the delimiter is left at its default "||", and the data "f||o||o" is passed, the bot will press the keys "f, o, o" in sequence when it runs. If the bot is passed "Control||N||Enter", it will press "Control+N, Enter".

When data is provided, any recorded keypresses are ignored - the data takes precedence.

# Use custom selectors

Axiom accepts custom selectors. You can optionally use these instead of the selector tool, in instances where the provided tool is not able to select the element you'd like to click on.

To add a custom selector:

  1. Click the "Select" button
  2. Delete anything that is in there
  3. Enter the desired selector into the text field, and click 'Complete':

custom_selector.gif

Axiom will accept any valid CSS selector, as defined here: https://www.w3schools.com/cssref/css_selectors.asp (opens new window).

To determine a good custom selector to use, we recommend right clicking on the element you want to use, and clicking "Inspect Element" from the dropdown menu that appears:

https://axiom.ai/assets/img/custom_selector_inspect.d379b216.gif

This will open Chrome Dev Tools; you will see the HTML of the page on the upper pane, with the element you clicked on currently highlighted.

Selectors are a broad topic, so we can't cover everything here, but two quick tips are to look for "id" and "class" in the HTML. For example, take the following HTML code:

https://axiom.ai/assets/img/html.fa65c11b.png

You can see that this HTML code includes the text 'class="ssrcss-f1h9ew-MainSection eustbbg2"' and 'id="main-content"'. This means that any of the following three custom selectors would work to select this content (there are three because classes are separated by spaces in HTML):

  • .ssrcss-f1h9ew-MainSection
  • .eustbbg2
  • #main-content

Using custom selectors can be challenging. We are always happy to help with more complex requirements - please get in touch at support@axiom.ai or submitting the form on https://axiom.ai/customer-supprt (opens new window) if you need assistance!

# Check if a checkbox is checked

In cases when you would like to first check if a checkbox is checked, scrape the HTML element, then based on the condition jump to a respective set of steps:

  1. Use the Chrome "Inspect" feature to examine the checkbox element and determine if any attributes of the checkbox HTML element change when it is selected.

    checkbox_attribute_change.gif

  2. Within the “Interact with page’s interface” step, click the “Add a substep” button.

  3. Select the “Get data from webpage” step from the step listing.

  4. Click on “Select” within the “Get data from webpage” step.

  5. Set the custom selector to HTML and choose the checkbox element which need to be checked.

  6. Click on the “Add step” button and choose “Conditionally jump to another step”. In the “Data to check” field, select the data from the previous step to check for values and set other relevant fields based on your requirements.

# Click multiple buttons on a page

With Axiom, you can automate the process of clicking multiple buttons on a webpage. This is useful when you would like to expand several sections on a webpage, for example:

expand_items.png

The process involves identifying a selector which is common for all the buttons and using the "Click Multiple Elements" step to simulate the user interaction of clicking multiple buttons on a webpage:

Clcik multiple items.gif

To use the step:

  1. Within the “Interact with page’s interface” step, click the “Add a substep” button.
  2. Choose “Click Multiple Elements” in the step listing.
  3. Click “Select” and choose the buttons which need to be clicked.
  4. Left click | Right click: Toggle off to perform a left click; toggle on to perform a right click.[ ] Left click
  5. Maximum clicks: The maximum number of clicks to perform. By default “All” is enabled, toggle the switch to specify the number of clicks.

Click Multiple Elements step.png