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.

How to automate the UI

To add the "Interact with a page's interface" step, click the "+" 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.

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

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 How to use the web scraper.

Filling 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 How to automate the UI.

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

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.

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 from the page.

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.

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

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

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.

Using data

The second way to use the "Press Key(s)" sub step is to use data. This allows you to dynmically pass in the keys to be pressed based on another data source. Like all data, select the variable 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 precendence.

Looping through data

In How to loop through a list of pages, 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.

Scraping 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 How to use the web scraper, 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.

Using 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, click the "Set custom selector" button, delete anything that is in there, enter the selector into the text field, and click 'Save':

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

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:

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:

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 if you need assistance!