How to click every instance of a UI element on a webpage

[joshlwulf]

I have a website with 6000+ search results and for each result, there is a PDF that I need to download and a button to generate that PDF (see screenshot below). Clicking that button results in the file downloading with the name that it needs to my download folder so it seems like it should  be a very simple automation - open the URL (which displays the search results), click every Generate PDF button on the page (the search results on each page can be set to up to 200), click Next Page and go through the process again until Next page is no longer an option. Seems simple, but I am new to Power Automate Desktop. I have the necessary licenses, but could someone point me in the right direction? 

[MichaelAnnis]

I am not familiar with clicking on redundant UI selectors; I know there is a way to say, click on 1st UI = Generate, click on next UI = Generate, but I don't know enough about it.

If I were building this, I would assume this site accepts Send Keys {Tab} to use as a selector, and then I could go into a loop:

Loop using LoopIndex 200 to 6000 increment of 200

Loop using LoopIndex 1 to 200 increment of 1

If LoopIndex = 1

Send Keys {Tab} 'as many tabs as you need to get to the first Generate

End If

If LoopIndex >1

Send Keys {Tab}{Tab}{Tab}{Tab}{Tab} 'looks like 5 tabs to get to your next Generate

End If

Send Keys {Return}

Whatever other commands you need to save your file and get back to the website screen

If LoopIndex = 200

Send Keys {Tab} 'tabs to get the next page icon

Send Keys {Return}

End If

End Loop

End Loop

Best of Luck.

[joshlwulf]

Thanks so much for your quick response! That was just a part of the page so there are a lot of tabs to get to each button and although the examples I showed always have 5 tabs to get to the next Generate within that column of the table, that isn't always the case. Sometimes it might only be 2 and sometimes it could be more than 5. I think there are enough differences where I couldn't do any solutions based on tab counts and would need to do it based on the buttons. 

[joshlwulf]

I updated the title for more clarity. 

[MichaelAnnis]

Can you share a snippet of the source code highlighting the selectors for at least 2 of the download links?

[Anonymous]

Like this?

https://docs.microsoft.com/en-us/power-automate/desktop-flows/how-to/click-elements-list-links 

[joshlwulf]

Sure. I'll add screenshots with context and the source code for those elements.

1)

<button _ngcontent-c1="" class="generate btn btn-link btn-sm" mattooltip="This will generate a single PDF for all files listed for this row" mattooltipclass="help_tip" mattooltipposition="above" aria-describedby="cdk-describedby-message-4" cdk-describedby-host="" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg _ngcontent-c1="" fill="rgb(33,150,243)" height="80%" role="img" viewBox="0 0 48 48" width="30%" xmlns="http://www.w3.org/2000/svg"><title _ngcontent-c1="">Generate PDF icon</title><path _ngcontent-c1="" d="M0 0h48v48H0z" fill="none"></path><path _ngcontent-c1="" d="M40 4H16c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM23 19c0 1.66-1.34 3-3 3h-2v4h-3V14h5c1.66 0 3 1.34 3 3v2zm10 4c0 1.66-1.34 3-3 3h-5V14h5c1.66 0 3 1.34 3 3v6zm8-6h-3v2h3v3h-3v4h-3V14h6v3zm-23 2h2v-2h-2v2zM8 12H4v28c0 2.21 1.79 4 4 4h28v-4H8V12zm20 11h2v-6h-2v6z" fill="rgb(33,150,243)"></path></svg> Generate PDF </button>

2)

<button _ngcontent-c1="" class="generate btn btn-link btn-sm" mattooltip="This will generate a single PDF for all files listed for this row" mattooltipclass="help_tip" mattooltipposition="above" aria-describedby="cdk-describedby-message-4" cdk-describedby-host="" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg _ngcontent-c1="" fill="rgb(33,150,243)" height="80%" role="img" viewBox="0 0 48 48" width="30%" xmlns="http://www.w3.org/2000/svg"><title _ngcontent-c1="">Generate PDF icon</title><path _ngcontent-c1="" d="M0 0h48v48H0z" fill="none"></path><path _ngcontent-c1="" d="M40 4H16c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM23 19c0 1.66-1.34 3-3 3h-2v4h-3V14h5c1.66 0 3 1.34 3 3v2zm10 4c0 1.66-1.34 3-3 3h-5V14h5c1.66 0 3 1.34 3 3v6zm8-6h-3v2h3v3h-3v4h-3V14h6v3zm-23 2h2v-2h-2v2zM8 12H4v28c0 2.21 1.79 4 4 4h28v-4H8V12zm20 11h2v-6h-2v6z" fill="rgb(33,150,243)"></path></svg> Generate PDF </button>

[MichaelAnnis]

More like this...on this page, here is reply button #1
<a class="lia-button lia-button-primary" rel="nofollow" id="link_7" href="/t5/forums/replypage/board-id/MPADesktop/message-id/5862"><span>Reply</span></a>

Here is reply button #2:
<a class="lia-button lia-button-secondary reply-action-link lia-action-reply iconClass lia-button-slim" id="link_17" href="">Reply</a>

And reply button #3:
<input title="" class="lia-button lia-button-primary lia-button-Submit-action" value="Reply" id="submitContext_3a9954501ec803_0" name="submitContext_0" type="submit">

I'm hoping yours is a little cleaner in the selector identifiers...for instance, if all 3 of these said value = Reply, then I believe we can use that to say, click on each iterance of "value = "Reply"".

That's my thought process, and I know it is possible, just have to figure it out.

[joshlwulf]

[joshlwulf]

[joshlwulf]

Sorry. Every time I tried to copy the source code or insert snippets, it wouldn't show up in the thread. The only way to make it work was to do screenshots.

[Anonymous]

Check if this works for you: Click on several links on a web page, one after the other | Microsoft Docs

It's from WinAutomation documentation, but logic and actions apply to PAD.

[MichaelAnnis]

Thanks @Anonymous , this is what I was trying to get at.  I tried to create this on this very page to capture all the reply buttons using attribute value="Reply", but didn't have any luck.  Are you able to?

[tkuehara]

Hi @joshlwulf 

So, basically, you have a table with lots of rows and a fixed column with the button element in each row (I'm reading from the HTML print screens).

Also, you have the paging requirement. I'll divide the solution in these two major groups:

1. The rows iteration; meaning the process to click at each download button
2. The paging iteration; although I'm assuming things here

Rows iteration

For this first requirement, you'll need to:

1. Map the web element; in this case, the "Generate PDF" button
2. Edit the selector by toggling "Custom" at the "Selector builder" window and changing the selector to a dynamic approach
3. Count the number of rows: here you can do it either by retrieving the data table and counting its rows or JS
4. Iterate each row to click the download button

Here's an example:

Button selector

Dynamic selector

JS

Sample JS: replace querySelectorAll reference with you button path

Sample flow

Sample flow - add whatever steps needed to each file download

Page iteration

The same principle could be applied here, meaning:

• You'll need to map the first element
• Change it to a dynamic approach
• Count the number of occurrences
• Iterate them

Here's the part I say I'm assuming things:

You probably have a single row element (tr tag) with each page link in different columns (td tag). Then your dynamic part will be the <td> tag for this solution part. But the main logic remains the same.

Sample paging - single row with each link on different cells

Pro tip: to better organize your code, I'd recommend separating those two parts in different modules (subflows):

Within the page iterator, you call the rows iterator

[joshlwulf]

Thanks. This may be an appropriate solution, but it looks like I'd already need to be a Power Automate pro just to follow the instructions so maybe this is beyond my skill level. When I try to map a web element, it does not give me an option to enter the text you provided in any dynamic selector. The only selection for elements that I can do is the one that highlights the element in red. I also don't see anywhere in the sample flow you provided that shows where that dynamic selection takes place. I appreciate your response though! It may be helpful to someone else who searches for the same thing later on.

[tkuehara]

Hi @joshlwulf 

The dynamic selector happens in two steps:

• In the object reference itself, through the row index: the tr:eq(%i%) means that instead of fixing an index, it will assume any value in the %i% variable

At the red square you can choose the variable to be used to dynamically reference each row

• And finally in the loop, where it starts in 0 and increments one by one until the last index is reached

Sample flow: add necessary steps inside the loop for each file

This means that each loop iteration will select a different row:

• When it starts, %i% = 0 then the first button is pressed; PAD interprets as [...] > tr:eq(0) > td > button
• At the next iteration, %i% = 1 then the second button is pressed; PAD interprets as [...] > tr:eq(1) > td> button
• The next one, %i% = 2, third button is pressed; PAD interprets as [...] > tr:eq(2) > td > button
• And so on

To manually edit the selector to add a variable in it, you'll need to toggle the "Custom" option in the "Selector builder" screen:

The default selector: eq() value is fixed and you want to change to a dynamic approach

[joshlwulf]

Thanks! I figured out how to find Selector builder and I think I now understand everything that your steps are supposed to accomplish. I think now I just have syntax errors. You said "Sample JS: replace querySelectorAll reference with your button path". This is my path from the Selector builder: table[Id="tblRslt"] > tbody > tr[Class="ng-star-inserted"]:eq(%i%) > td[Class="ng-star-inserted"]:eq(8) > button[Class="generate btn btn-link btn-sm"][Type="submit"], but when I try to replace querySelectorAll with that, I just get an error on the next step that it "Can't convert text '' into a valid number (text provided is either in a non-recognizable format or contains too many characters)." 

Here's the exact function I'm trying to run: 

[tkuehara]

Hi @joshlwulf 

Sorry, my bad. There were some stuff I missed. So the first one is if you have an iframe in your target website then you should use the "iframe.contentWindow" prefix. If not, then you could go with only using querySelectorAll. Second, what you need to replace is the querySelectorAll content. Third, in here you can only use CSS selectors. The final code should look something like this (for a non-iframe website):

[joshlwulf]

No need to apologize! The only way I even had a chance of figuring this out was with your help. I appreciate all of your effort!