How to loop through elements in Web pages
This guide will help you understand how we can loop through elements in webpages. Web data is incredibly diverse, and while tables are a common format, much of the information we need to interact with or extract isn't always tabular. Mostly, data resides within various HTML structured elements like <div>, <span>, <li>,<a>, and so on. And, we'll want to perform data manipulation on these elements directly on the webpages.
Some common scenarios include:
- Downloading a list of files or reports from a web portal.
- Performing actions for each row in a table.
- Extracting data from items within lists or structured UI elements.
While a dedicated "loop" action is currently under development in Zoho RPA, this example will demonstrate how to achieve similar iterative behaviour within your RPA automation flow using existing actions.
Upload images to Zoho Inventory
In this example, we will automate the upload of product images to Zoho Inventory. The corresponding image files are stored locally, named according to the product codes(SKUs). The automation workflow we build will navigate through a list of products in Zoho Inventory and automatically upload the appropriate image for each item based on its product code (SKU).
Building the workflow
Create a new flow
1. Go to the My Flows page and click Create flow.
2. Name your flow and give it a description, then choose the folder where you want to store the workflow.
3. Select the required RPA agent to run the workflow. RPA agents are desktop machines that execute the workflow. The flow will run on the selected agent. You can change the agent later in the workflow builder, but ensure that file paths and other configurations are compatible with the new agent.
Set the trigger
The first step in building a workflow is to select a trigger, an event that initiates the workflow. For this example, we'll use a webhook trigger. This allows the workflow to execute real-time, letting you trigger image updates only after importing new products or when dependent on another application. It ensures the workflow runs precisely when needed.
Configure and test the webhook trigger
We'll configure and test the webhook trigger, which acts as the initiation point for your workflow. A webhook trigger is essentially a unique URL that gets generated for each flow, and the flow is triggered every single time we make a call to this URL. Sometimes, we'll want to pass data into the flow as inputs. In our case, this will be the specific 'row' that the flow needs to operate on.
- Copy the unique webhook URL generated for your workflow, then click the Next button.
- To test the webhook URL, you can make an HTTP POST request to this URL using one of the following methods:
- From your web application: Integrate the webhook URL into your web application, configuring it to send an HTTP POST request with the necessary payload.
- Using an API Testing Tool (e.g., Postman):
- Create a new HTTP POST request.
- Paste the copied webhook URL into the request URL field.
- Navigate to the Body tab, select the raw option, and specify JSON as the content type.
- Enter the following sample JSON payload, which will send the 'row' value to your workflow.
Sample JSON:
{
"row": "1"
}
Build the workflow
We are going to create one workflow and have it call itself N times, depending on the number of items in the Zoho Inventory list.
Organize Product Images:
Before we begin, you'll need to prepare your image files. Store all product images in a dedicated folder, ensuring each file is named precisely with its corresponding Zoho Inventory SKU number. For example, if a product's SKU is 1001, its image file should be 1001.png. This exact naming is important for the workflow to match images to products automatically.
Workflow logic:
Now for the core logic: The workflow connects to Zoho Inventory and checks each item on your product list. If a product is found, it performs required actions, like uploading the corresponding image. If an item isn't on the list, the workflow simply moves on or finishes, ensuring it processes only your existing products.
Workflow steps:
- Use the Open URL action from the Web Automation category and configure it with the URL to your Zoho Inventory.
- Your Zoho Inventory product list is displayed in a table format. We need to iterate through these table rows to find and interact with specific items.
- To locate the table element: Go to your Zoho Inventory page, right-click on any item in the list, and select Inspect to open your browser's developer tools.
- Use the element selector tool (often a pointer icon or Ctrl+Shift+C) and click directly on a Product Name element on the webpage. This highlights its corresponding HTML code in the developer tools.
- Right-click on this highlighted HTML code and choose Copy > Full XPathCopied Xpath
/html/body/div[6]/div[5]/div[3]/main/div/div[4]/div[2]/div[2]/table/tbody/tr[2]/td[2]/div/div[2]/aThe Copied Xpath, tells that it is a Table element " table/tbody/tr[2]/td[2]/div/div[2]/a". So, we simply need to iterate through the table we can find the table row. - Paste this XPath into the search bar within the HTML view (Ctrl+F). You'll see it points to a specific table row element.
- This XPath needs to be dynamic to target different rows. You'll observe that changing the numerical index in the XPath highlights different products, confirming you've found the correct element for row iteration.
Elements on web pages aren't always in tables; they're frequently found within other HTML tags like <div>, <span>, or <a>. To iterate through these elements, you'll need to identify the correct div or span that allows for a dynamically changing numerical index, enabling you to go through the elements on the webpage. We'll see an example of how we can iterate when it's another element. Learn more from the video below: - Drag the Check if element exists action from the Web Automation category into your workflow.
- Configure it by selecting XPath as the type and pasting your refined selector.
- Replace the static row number in the XPath with the Row variable you set up in your Webhook trigger. This ensures the workflow checks for the specific product on the row number provided by your webhook's input.
- XPath : /html/body/div[6]/div[5]/div[3]/main/div/div[4]/div[2]/div[2]/table/tbody/tr[${webhookTrigger.payload.row}]/td[2]/div/div[2]/a
- Drag and drop the Decision action from the Logic tab. This action is used to check whether the element (e.g., a product name) was successfully found in the previous Check if element exists action. Configure the condition to check if element exists == true.
- If the element exists, we need to be able to click on that element. Drag and drop the Click action from the Web Automation category. For the UI selectors, use the same selector from the Check if element exists action.
Workflow screenshot
Action configuration
We will use the Web recorder to record a few steps:
- Navigate to the Zoho Inventory items page.
- Click on the product name.
- Hover over the SKU number that appears (it will be highlighted in orange). Click the gear icon next to the SKU and change the action to Get Text. Click OK.
- Click the Browse option to initiate the image upload.
- Click Stop on the recorder.
- Delete all recorded steps except the "Get Text" action for the SKU and the action that initiates the file browser (e.g., the click on "Browse file"), and confirm to add them to the workflow.
These steps will initially be added to the default branch of your Decision action. Ensure you move them to be placed immediately after the 'Click' action (from Step 5) in your workflow. See screenshot below. - Use the Open file dialog action under the Windows General category . You will be asked to indicate the Open dialog element on the screen. To do this, navigate to Zoho Inventory, click on an item, then use the Browse file option to open the Open dialog window. Use Ctrl + click to select it.
- We need to configure:
Folder path: Select the directory that holds all the images.
File name: Use the text of the SKU obtained from the previous action, ensuring it includes the file name and extension (e.g., sku.jpg).
Under delay settings, you can adjust the delay after action for a few seconds. The exact duration depends on the image size, as it can sometimes take a few seconds for an image to fully load on the item. We recommend setting the delay after action to1000 - 1500 milliseconds - Create another custom function to call this same flow again. First, click on the Logic tab, then select Custom Function, then click + New Custom Function. In the custom function, paste the provided code.void call_Inventoryflow(int row_v){row_v = row_v + 1;map1 = Map();map1.put("row",row_v);test = invokeurl[ url: "<REPLACE YOUR WEBHOOK URL>"type: POSTparameters: map1];}Remember to replace the webhook URL with the actual URL from your webhook trigger, then save your changes.
- Drag and drop this custom function to your workflow. Set its input to the webhook variable, so that this workflow repeatedly runs until the last item on the page.
- Next, we need to prevent recursive runs when no elements are present on the page. To handle this, in the Check if element exists action's default condition, simply add a Close browser action. This way, if the element exists, it will click and upload images; otherwise, it will close the browser and end the workflow.
Bot Execution
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Web Automation Actions
Web automation is a key feature in Zoho RPA, designed to simplify and automate your web-based tasks. It allows you to interact with web pages, extract data, and perform actions automatically, freeing you up from manual work and making your processes ...How to loop through Excel rows
Overview This guide will demonstrate how to process data for each row in an Excel file within your RPA workflow. We'll achieve this by creating two workflows: a main workflow to read the Excel data and a sub-workflow to process each individual row. ...Builder tools
Builder tools are useful utilities to help you in the process of building the workflow. They can be found in the top-right corner of your builder screen. 1. Save Your flows will be autosaved by default. The time at which a flow was last saved will be ...Windows General actions
Windows General Actions are a category of actions in Robotic Process Automation (RPA) that are applicable to both web automation and Windows application automation. These actions are not specific to a particular type of application.They pertain to ...Introduction to Zoho RPA
What is RPA? Robotic Process Automation (RPA) is a software technology that automates business processes by deploying software robots to mimic human-like interactions on applications. RPA bots can interact with any application or system based on its ...
New to Zoho LandingPage?
Zoho LandingPage Resources