Need the html code for the next button while scraping a webpage

Question

I am trying to click the next button while scraping a webpage using Power Automate Desktop. I tried copying the html code within the developer tools within the webpage, but as far as I can tell the previous button has the same path. I do not know how to differentiate between the two.

When I right click the next button, and select 'inspect' it takes me here

<a class="hd-pagination__link " href="URL" aria-label="Next"></a>

When I do the same for the previous button, it takes me here:

<a class="hd-pagination__link " href="URL" aria-label="Previous"></a>

I tried using this a[class="hd-pagination__link "] and like I said when I run the flow, it clicks the next, then previous buttons so I am only getting page 1 and two on a continuous loop.

I also tried using the next button as an anchor but it doesnt work right either.. it will click the next button and then it will click where the next button was at (for example page 8 will be where the next button was after the first click)

Answer 1

Xpath is a great way to navigate these types of things. I am not familiar with the tool you are using, you should be able to get an xpath of html elements using developer tools. https://discourse.mozilla.org/t/how-can-i-get-the-xpath-of-an-element-in-developer-tools-as-firebug-is-not-supported-in-latest-ff/25934 Then, if there are similar elements which return an array in your code, you can use indexes to select one. Keep in mind this is one of the reasons scraping is a fragile thing so maybe run some kind of automated data validation in case the path changes, or some other kind of thing changes.

Answer 2

With power-automate-desktop you can use valid jQuery css selectors in the UI element selector.

Copy the selector path of the element:

Switch the UI Element selector to use text and then paste the selector path in the text area (but remove the #:

You can use any valid css selector in there, even things like: div-hover > div > button:contains("Next") or div > li:nth-child(3) > button

I tend to use jQuery in the dev tools console to get the correct selector if it's a bit tricky, so I'll have something like $('#div-hover > div > button:contains("Next")') and then transfer that to the UI selector in power-automate-desktop as div-hover > div > button:contains("Next")