Block reference / Control flow

Loop elements

Run the blocks after it once for each element that matches a selector, loading more as it goes.

In both appsWarpX BrowserWarpX Phone

Use Loop elements to work through a list on the page: search results, product cards, comments. It finds every matching element, marks each one, and hands the blocks inside the loop a selector for one element at a time. When it runs out, it can click a button, follow a link or scroll to load more.

The Loop elements block's settings, filled in as in the example below.

Settings

Description

A note shown on the block in the canvas.

ExampleEach search result
Loop ID

The name of this loop, used in {{loopData.results}} and in the Loop breakpoint that closes it. Spaces are removed; an empty ID is replaced with a random one.

Exampleresults
Element Selector

The CSS selector or XPath that matches every element to loop through.

Examplediv.result
Wait for selector

Under Selector options. Wait for the elements to appear instead of failing at once when there are none yet.

ExampleChecked
Selector timeout (ms)when Wait for selector is on

How long to wait for the elements.

Example5000
Max data to loop (0 to disable)

Stop after this many elements, including any loaded later. 0 means no limit.

Example50
Reverse loop order

Go through the elements from last to first.

ExampleUnchecked
Action

Under Load more elements. What to do when the loop runs out of elements: None, Click an element, Click a link, Scroll down or Scroll up. The loop goes on with any new elements that appear.

ExampleClick an element
Element selectorwhen Action is Click an element or Click a link

The button or link that loads more.

Examplebutton.load-more
Max seconds wait for more elementswhen Action is Click an element, Scroll down or Scroll up

How long to wait for new elements after the click or scroll. If none appear in that time, the loop ends.

Example5
Scroll to bottomwhen Action is Scroll down or Scroll up

Scroll the list all the way down instead of only to the last element. For Scroll up it reads Scroll to top.

ExampleChecked
Max seconds wait for the page to loadwhen Action is Click a link

How long to wait, in seconds, for the next page to finish loading after the link is followed. The loop carries on as soon as it has loaded, and fails if it takes longer.

Example10

Every block also has the shared block settings — a description, Disable block and what to do on an error, and Finding elements explains selectors in more depth. Fields that take text accept data from earlier blocks.

What it hands on

One output: the loop body. A Loop breakpoint with the same Loop ID moves on to the next element, runs the load-more action when the elements run out, and leaves by its own output when the loop is over. Inside the loop, {{loopData.results}} is a selector for the current element and {{loopData.results.$index}} is its position, counting from 0.

Example: Collect every title from a list with a Load more button

  1. Start
  2. New tab
  3. Loop elements
  4. Get text
  5. Loop breakpoint
  6. Google Sheets
Where Loop elements sits in the example workflow.
  1. Add a New tab block with the list page's URL.
  2. Add a Loop elements block. Set Loop ID to results, Element Selector to div.result, tick Wait for selector and set Max data to loop to 50.
  3. Under Load more elements, set Action to Click an element and Element selector to button.load-more.
  4. Add a Get text block with the selector {{loopData.results}} h3 and Insert to table on.
  5. Add a Loop breakpoint with Loop ID results after Get text.
  6. Connect the breakpoint's output to a Google Sheets block set to Append, to write the collected rows to a sheet.

On WarpX Phone

  • This block does nothing useful on WarpX Phone: it finds elements in a web page, and a phone run has none, so it fails. To go down a list on the phone's screen, use the phone's element blocks inside a Loop data or Repeat task loop.

Good to know

  • Use {{loopData.results}} as the selector in blocks inside the loop. Add a child selector after it, as in {{loopData.results}} h3, to reach something inside the element.
  • Stay on the page while the loop runs. The marks that identify each element live in the page, so if a block inside the loop navigates the tab away, the next selector finds nothing when you come back. Open detail pages in a New tab and return to the list tab instead.
  • With Click a link, the loop ends as soon as it reaches a page without the link, so the elements on that last page are not looped through.
  • The block needs an open tab, and fails with "Can't find an element with the selector" when nothing matches and Wait for selector is off.

See also

  • Loop breakpoint — Mark the end of a loop: go back for the next item, or leave when the loop is done.
  • Loop data — Run the blocks after it once for each row, number, list item or element.
  • Get text — Read the text of one element or many, and save it to the table or a variable.