WEB AUTOMATION - Lesson 6: Iterating lists of elements

  • How to select and work with lists of web elements to be used in automation flows.
  • How to capture a single element and use the strategy editor to expand the selection to all elements of the same type.
  • How to query inside the individual list elements to retrieve, e.g. the text inside a specific column.
Go to next video.

You will learn:

  • How to select and work with lists of web elements to be used in automation flows.
  • How to capture a single element and use the strategy editor to expand the selection to all elements of the same type.
  • How to query inside the individual list elements to retrieve, e.g. the text inside a specific column.
Go to next video.

TRANSCRIPT

Welcome to the 6th lesson in web automation with LEAPWORK

In this lesson we will look at handling lists of elements.
More precisely lists of web elements.

Examples of this are
rows in a table,
articles in a blog,
invoices in a web based ERP system etc.

Common to the examples is that we want to capture one element
and then iterate all of the elements of the same type.

In this lesson we will look at a table and iterate all the rows in the table.
For each row we will read the value in a given column and print out the result.

The table we are using is hosted on a web site named "the-internet"
and it is hosted on herokuapp.com. You can find the URL in the description to this video.

We start by adding a Start Web Browser and enter the URL.
Then we add a Find Web Element.
We are using this building block to capture one of the rows in the table.
This is the standard way when iterating elements:
- Capture one of the elements and then change the selection to include all.

When I click "Select Web Element to find",
we can see, that I'm actually not able to select the entire row.
I'm only able to select individual cells in the table.
This is because the cells from a capturing perspective lies above the rows.

The trick to select the row is to:
- capture one of the cells.
- edit the web element
- Click on Validate.

Clicking on validate causes 2 things to happen.

First, the locater strategy is executed
allowing us to verify
that the strategy finds the right element.
This is indicated by the red border.

Secondly it loads the entire DOM into the strategy editor
allowing us to navigate and select elements directly from the DOM.

In the DOM tree we can now right-click the TR - the row - and select Capture.
This will change the target of the locater strategies from the previous select cell
to the row containing the cell.

The next thing to do is to expand the locater strategy
to include all rows in the table.

When we look through the available strategies
we are looking for a strategy that is bound to a specific row.
In this case both strategy number 3 and 4 is pointing to row no 4.
We can use both of these strategies to expand the selection to include all rows.

Before changing the selection notice,
that by clicking validate,
the Strategy editor shows how many matching elements are found.
In this case 1.

If I remove the condition to constrain the strategy to row number 4 and click validate
we can see, that it now says 1 of 10.
This means that the strategy now matches 10 rows in the table.

Looking in the browser we can see that the first row is now highlighted
and if we click on the arrows next to the captured element,
we walk through the different matching elements one by one.

It seems this selection includes all rows,
so we can save this.
This means the strategy will return a list of all 10 rows,
and we can now use the "Use occur" to decide how to access the rows.

We can either pick a specific row,
but in most cases selecting "All" is the right choice.
With this selection all the rows will be iterated one by one
and for each row, the top connector is triggered.

The "Found element" property contains the individual rows as they are iterated,
and we can use this to dive into the row and pull out details from the cells.

An easy way to get the text of a column is to connect the "Found element"
to a Get Web Text block.

If we run this, it will pull the text from all the cells,
as one combined text string.

Let's try to run this.

$$$ RUN

If we want to work with a specific cell,
then we can use the "select web element" in the Get Web Text block.

In this case we capture the forth cell.

Before we run this we need make a small change to the strategy.
When we capture an element on the page,
it is always captured in the scope of the entire page.
This means the strategy is able to uniquely identify the element on the entire page,
but in our case,
we just need to look into an individual row, so the strategy is simpler.
We also need the strategy to work for all rows,
so the strategy can't depend on for instance values from a single row.

When we look at the strategies we can see,
that the fourth strategy selects the cell,
by selecting the fourth cell, in the first row, in the table.

Because we are already in the scope of a row - provided by the "Found element" property,
we can simply delete the part of the strategy that is identifying the row.
In this case the TBODY and TR selector.

So to recap. We iterate all the rows, and provide the individual rows
to the Get Web Text block.

In the selector for this block, we have simplified the strategy,
so it selects the right cell inside the row.

The final piece is to write the text found to a log message block.

Let's run the flow

$$$ Run the flow

As we can see,
the flow iterates all rows,
selects the fourth column
and prints the text inside the cell.

In this lesson we looked at how to select and work with list of web elements.
We saw how to capture a single element and use the strategy editor to
expand the selection to all elements of the same type.

As part of the iteration of the list elements,
we looked at how we can query inside the individual list elements to
get for instance the text inside a specific column.

Thank you.