Automate a button click

There are several ways to automate clicking a button in a web app. The primary method is the Click element step, but you can also record key presses or fall back to JavaScript.

Click with the Click element step

Open the step finder, search for click, and add the Click element step. Then choose the button using one of the methods below.

Choose the button with the selector tool

Point and click on the page to select the button.

Click Select to open the single selector tool.
Hover over the button and click to select it.
Click Complete.

Select by text

If a button has unique text on the page (for example Submit or Message), select it by its text. This is the most reliable method when it's available.

Click Select to open the single selector tool.
Click Custom.
Tick Use element text instead of HTML.
Click Complete.

Use a custom CSS selector

If you're comfortable with CSS, use a custom selector.

Click Select to open the single selector tool.
Click Custom.
Enter your CSS selector in the text box.
Click Complete.

Click only if the button is present (optional click)

If a button doesn't always appear on the page, the Click element step throws an error and stops the run. To make the click optional, tick Optional click. The run continues regardless, and the button is clicked only when present.

Click with the Press key(s) step

The Press key(s) step records and replays keystrokes. For example, record Tab to move focus to a button and Return to click it. See the keyboard shortcut examples.

Click with JavaScript

If you're comfortable with JavaScript, the Write javascript step can click elements that the no-code steps can't. Use this as a last resort.

Click every element containing some text

Useful when you want to click items in a list that share a common pattern.

document.querySelectorAll("INPUT SELECTOR HERE").forEach(function(el) {
    if (el.outerHTML.includes("TEXT")) {
        el.click();
    }
});

Replace INPUT SELECTOR HERE with the selector for the elements you want to scan, and TEXT with the text you want to match. You can also pass data into this step from earlier steps to replace the hardcoded value.

Click a link or button inside a row containing text

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

This clicks the first a tag inside each matching row. To click a different one, change the index:

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

To click a different element type, change the tag name:

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

To select by class name:

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

Click multiple buttons