How to loop through a list of buttons


Learn how to loop through buttons on the same web page using custom CSS selectors.

This is best used if you have a list that contains buttons, such as downloading invoices from a list.

Finding the right selector


Finding the right selector is important to get started. Start by using our blog The Best Custom CSS Selectors to Use for Automations to identify a suitable selector for the button.

Once you have a selector selected, you’ll need to add them into a Google Sheet.

Building the selectors


For this example, we are going to use the following button selector, this is the same selector for all buttons within the list: button.download. When querying this selector this will return a list of elements that match this CSS selector.

Method 1: nth-child()

The nth-child() method exists within CSS to allow you to select an element based on it’s position within the list of elements matching that selector. For example, button.download:nth-child(1) will select the element at position 1. Your list would look something like this:

Selector
button.download:nth-child(0)
button.download:nth-child(1)
etc...

Method 2: unique selectors

Some buttons will have similar but unique selectors, for example, button.download-1, button.download–2 and so on. This is the easiest method of identifying the elements on the page. Your list would look something like this:

Selector
button.download-1
button.download-2
etc...

Set up your Google Sheet or Excel Sheet


The selectors will need to be entered into a Google Sheet/Excel Sheet manually - this will allow the selectors to be read into your automation and then be looped through. To do this, add the selectors to a single row within within your sheet, for example:

Selector
button.download:nth-child(0)
button.download:nth-child(1)
etc...

Set up your automation


Insert a Read data from a Google Sheet or Read data from Excel step into your automation and follow the instructions to set this to read the data from the sheet you set up above.

Next, insert a Loop through data step and set the data that you read into the automation using the read step above as the data to loop through. Any steps included in this step will have access to each row of data as it iterates through the data from your spreadsheet.

Once you are ready to click the button, add a Click element step. Click "Select", then “Custom” and then “Set selector from data” - select the data from the loop that includes your selector. Learn more in our Custom selector documentation.