How to click on same but next HTML DOM element?

(0) Share

Report

Posted on by colonel_claypoo

161

Please see the screenshot.

I have the requirement to perform Web UI actions on each of those elements subsequently (the three vertical dots). That means click on it, chose a dropdown option etc. Keyboard shortcuts don't work with this type of website framework. But I can get it to work using "Click link on web page" with custom element selectors.

Now, once I've performed the necessary actions on the current item, how to I move to the next (three vertical dots)? Like I mentioned, keyboard tab does not work. Image recognition also only gets me the first ocurrence.

There's javascript and I'm able to retrieve the NodeList with document.querySelectorAll. But same thing, I don't know how to access the subsequent nodes.

Sounds so complicated and there're should be a way to move to the next DOM element and perform the necessary actions.

Any idea?

Categories:

Power Automate Desktop

I have the same question (0)

All responses (4)

Answers (0)

Nived_Nambiar 18,129 Super User 2025 Season 2 on at

Like (0)

Report

Hi @colonel_claypoo

Could you share how selector looks like ?

There is a way how you can iterate through simmilar elements one by one.

Assume the selector of three dots elements look like below

p[class="test"]

Now to make the above selector to click on each 3 dots one by one , you have to use this approach as i will be showing below:

p[class="test"].eq(0) ------------------> clicks first 3 dots

p[class="test"].eq(1) -------------------> click second 3 dots

p[class="test"].eq(2) -------------------> click third 3 dots

So as you see if you can increment the integer inside eq() you can successively clicks 3 dots on iteration manner 🙂

So try to use same approach 🙂

Hope it helps !

Thanks & Regards,
Nived N 🚀

LinkedIn: Nived N's LinkedIn
YouTube: Nived N's YouTube Channel

🔍 Found my answer helpful? Please consider marking it as the solution!
Your appreciation keeps me motivated. Thank you! 🙌

Was this reply helpful? Yes No
colonel_claypoo 161 on at

Like (0)

Report

The selector is:

But where do I use the .eq() and how?
Here...

Or here...
Mind you, that Javascript function doesn't work.

Thanks.

Was this reply helpful? Yes No
Nived_Nambiar 18,129 Super User 2025 Season 2 on at

Like (0)

Report

Hi @colonel_claypoo

could you inspect the ui element (i.e 3 dots) using inspect element option in chrome/any other browser so that i can see how html structure of that element looks like ?

Thanks & Regards,
Nived N 🚀

LinkedIn: Nived N's LinkedIn
YouTube: Nived N's YouTube Channel

🔍 Found my answer helpful? Please consider marking it as the solution!
Your appreciation keeps me motivated. Thank you! 🙌

Was this reply helpful? Yes No
colonel_claypoo 161 on at

Like (0)

Report
Sure, here you go, this is all that pertains to the three dots at its sub menu that opens upon clicking it

<div class="flex w-32 flex-none"> <div class="ml-auto justify-center"> <transaction-list-item-actionbar> <div class="group/actions"> <div class="flex h-[20px] rounded-md border sm:h-[38px] sm:border-solid border-transparent sm:group-hover/actions:border-bp-border-inner sm:group-hover/actions:bg-bp-button-background sm:group-hover/actions:shadow"> <div clickstoppropagation="" class="hidden flex-none items-center justify-center rounded-l-md border-r border-solid border-bp-border-inner hover:bg-bp-theme-bg-gray-lightest group-hover/actions:visible sm:flex sm:min-h-[38px] sm:min-w-[38px] invisible"> <ds-icon-pencil class="text-bp-theme-fg-gray-dark cursor-pointer h-4 inline-flex shrink-0 text-bp-text-first w-4"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path> </svg> </ds-icon-pencil> </div> <div class="invisible flex flex-none items-center justify-center border-r border-solid border-bp-border-inner hover:bg-bp-theme-bg-gray-lightest group-hover/actions:visible sm:min-h-[38px] sm:min-w-[38px]"> <ds-icon-external-link class="text-bp-theme-fg-gray-dark cursor-pointer h-4 inline-flex shrink-0 text-bp-text-first w-4"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> </svg> </ds-icon-external-link> </div>  <div class="flex h-[20px] flex-none items-center justify-center rounded-l-md sm:h-[38px] sm:min-w-[38px] sm:rounded-l-none sm:rounded-r-md sm:border-solid sm:border-bp-border-inner sm:hover:bg-bp-theme-bg-gray-lightest"> <ds-icon-dots-vertical class="text-bp-theme-fg-gray-dark cursor-pointer h-4 inline-flex shrink-0 text-bp-text-first w-4"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path> </svg> </ds-icon-dots-vertical> </div>  </div> </div> <ds-overlay rawcssclasses="border-0 mt-1" class="border-0 mt-1py-1">  </ds-overlay> </transaction-list-item-actionbar>  </div>  </div>

This markup from the above is the actual three dots (SVG):
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>

Was this reply helpful? Yes No