.svg "Leapwork")
TRANSCRIPT
Welcome to the sixth lesson in web automation with LEAPWORK.
In the previous lesson, we learn how to Read text and numbers from a web page.
In this lesson, we will focus on learning how to iterate in lists of elements such as rows in a table, dropdown, multi-select, etc.
To demonstrate how to iterate we are taking a table as an example and we will show you how to iterate using it.
The table we'll be working with is hosted on the website "the Internet" and can be found at https://the-internet.herokuapp.com/.
You can locate the URL in the video description for easy access https://the-internet.herokuapp.com/challenging_dom.
Before we start, let's learn about how a table is structured and organized:
A table is made up of different elements. The main element is the table element, represented by "<table>". It acts as a container for all the other elements in the table.
The table header is identified by the "th" tag in HTML. It is used to label the different columns or sections of the table.
Each row in the table is represented by the "tr" tag. It helps organize the data horizontally in the table.
The table column is denoted by the "td" tag in HTML. It represents a single cell in the table and contains the actual data.
To extract data from specific columns, you need to locate the rows first and then target the correct column to get the desired information. In Leapwork, this can be achieved by using the "find web element" method and locating the "<tr>" tags that represent the table rows.
Once you have identified the rows, the next step is to find the columns containing the desired data. This can be done by targeting the appropriate "<td>" tags corresponding to the table's desired cells.
Once you have a specific row and column, you can iterate over each row and select the desired column in the table. This allows you to access and retrieve the data from each row individually.
Now, let's return to Leapwork and try extracting data from a table using the Leapwork flow.
We will begin by adding a "Start Web Browser" building block and entering the URL https://the-internet.herokuapp.com/challenging_dom
Next, we'll add a "Find Web Element" block to capture one of the rows in the table.
When working with web automation, a Find Web Element building block is used to find a web element, such as a div, tags, or class in the browser. Find Web Element building block is usually used while iterating through elements.
Let’s start with capturing one element on the table and then modify the selection to include all elements of the same type.
When I click "Select Web Element to find", we can see that I'm 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 lie above the rows.
To select the entire row, we can apply a trick. We capture one of the cells and then edit the web element. And press Validate button.
Clicking on "Validate" accomplishes two things: 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.
Now, we need to expand the locator 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.
We can see that both strategy numbers 3 and 4 are pointing to row number 5.
We can use either strategy to expand the selection and include all rows.
Before changing the selection, the Strategy Editor shows that the strategy currently matches 1 element.
By removing the condition that constrains the strategy to row number 5 and clicking "Validate," we can see that it now matches 1 of 10.
This indicates that the strategy now matches 10 rows in the table.
Looking at the browser, we can see that the first row is highlighted.
By clicking on the arrows next to the captured element, we can navigate through the different matching elements one by one.
This selection appears to include all rows, so we can save it.
This means the strategy will return a list of all 10 rows, and we can now use the "Use occur" option to determine how to access the rows.
We have two choices when it comes to accessing the rows: we can either pick a specific row.
or select "All" to iterate through all the rows one by one. In most cases, selecting "All" is the appropriate choice.
With this selection, the top connector is triggered for each row.
The "Found element" property contains the individual rows as they are iterated, and we can use this to dive into each row and extract details from the cells. One way to retrieve the text from a column is to connect the "Found element" property to a "Get Web Text" action.
If we run this, it will pull the text from all the cells,
as one combined text string.
Let's try to run this.
As we can see in the activity log the entire rows are now outputted as one string for each of the rows.
We can use the select web element in the get web text block if we want to work with a specific cell.
In this case, we're going to capture the fourth cell in the fifth row.
If we want to work with a specific cell, we can use the "Select Web Element" option in the "Get Web Text" action. In this case, we capture the fourth cell.
Before running this, we need to make a small change to the strategy.
When we capture an element on the page, it is captured in the scope of the entire page.
However, in our case, we only need to investigate an individual row, making the strategy simpler.
Additionally, the strategy needs to work for all the rows and not depend on instance values from a specific row.
Looking at the strategies, we see that the fourth strategy selects the cell by choosing the fourth cell in the first row of the table.
Since we are already within the scope of a row provided by the "Found element" property, we can simply delete the part of the strategy that identifies the row, including the TBODY and TR selectors.
To summarize, we iterate through all the rows and provide the individual rows to the "Get Web Text" action. In the selector for this action, we have simplified the strategy to select the correct cell within the row.
The final step is to write the retrieved text to a log message action.
Let's run the flow.
By running the flow, we can observe that it iterates through all the rows, selects the fourth column,
and prints the text inside the cell. In this lesson, we learned how to select and work with lists of web elements.
We saw how to capture a single element and use the strategy editor to expand the selection to include all elements of the same type.
We hope this tutorial provided you with valuable insights into iterating through the list elements, we explored how to query inside individual list elements to retrieve specific details, such as the text inside a particular column.
We suggest you try replicating this flow on your own by following the video.
Happy Automation!