How to automate a button click

There are a few ways to automate clicking a button in a web app or on a website using Axiom.ai. Our primary method is the "Click element" step, but you can also record key presses and use JavaScript.

# Automate a click with the "Click element" step

To automate a button click, use the Step Finder to search for "Click" and then add the "Click element" step. You will then need to select on screen the button you wish to click.

# Choose a button with the selector tool

Simply point and click on the screen to select a button.

How
  1. Click "Select" to open the single selector tool.
  2. Hover over the button and click to select.
  3. Finally press "Complete".

# Select by text

If a button has unique text, such as "submit" or "message," that no other element on the page has, we can find this button by using the text. We recommend this method whenever possible.

How
  1. Click "Select" to open the single selector tool.
  2. Press "Custom".
  3. Tick "Use element text instead of HTML".
  4. Finally press "Complete".

# Use a custom CSS selector

If you are familiar with CSS you can use custom CSS selectors.

How
  1. Click "Select" to open the single selector tool.
  2. Press "Custom".
  3. In the text box enter your selector.
  4. Finally press "Complete".

# Automate a click when the button is not always found (Optional click)

When you wish to click a button that does not always load normally, an error is thrown and the run stops. You can override this in the "Click element" step by ticking the box "Optional click." The run will continue if not found, and the button will be clicked if found.

# Automate a click with the Press key(s) step

The "Press key(s)" step can be used to record and replay keystrokes. For example, you could record "tab" to move the cursor onto a button and record "return" to click it. Here are some examples.

# Automate a click with Javascript

If you are familiar with JavaScript or perhaps using ChatGPT to generate code, you can use our JavaScript step to click buttons. We usually save this method as a last resort.

# Click all elements containing text

This may be useful if you want to click items in a list, or a particular item in a list. For example, an address.

Copy-paste the following code into axiom.ai's Write javaScript step.

You can use data output by other steps here, as well, replacing the hardcoded value "TEXT".

document.querySelectorAll("INPUT SELECTOR HERE").forEach(function(el) {
    // Input the text you want to search. You can use data output by other steps here, as well.
	if (el.outerHTML.includes("TEXT")) {
		el.click();
	}
});

# Click a link, button (or other) in a row containing text

Copy and paste the following code into axiom.ai's Write javaScript step.

You can use data output by other steps here, as well, replacing the hardcoded value "TEXT".

document.querySelectorAll("CUSTOM SELECTOR HERE").forEach(function(el) {
	if (el.outerHTML.includes('TEXT')) {
		el.getElementsByTagName('a')[0].click();
    }
});

This will get the first a tag that's a child of the elements you're selecting (usually a row or list).

If you want to select the 2nd a tag within that list, increment [0] to [1] as follows:

	el.getElementsByTagName('a')[1].click();

You can change the type of tag here from a to button or any other type:

	el.getElementsByTagName('button')[0].click();

If you want to select by Class name:

	el.getElementsByClassName('red')[0].click();

# Example

Try the following example on axiom.ai/demos/nytimes . It will Click the Dubai Article.

document.querySelectorAll("ol li").forEach(function(el) {
	if (el.outerHTML.includes('Dubai')) {
		el.getElementsByTagName('a')[0].click();
	}
});
Prev: How to automate browser actions
Next: How to enter text into an input fie...