In image 'UI' I need to select the second 'Setup' button on the page.
I've tried many different combinations of trying to select this element but have had no luck. I've seen some related posts but most talk about having 1 parent and 1 or 2 child elements. In this case I need to go along this path: li2/div2/div/a. I'm just unsure of how to string that together.
Xpath is not an option unfortunately as the id changes from session to session.
For additional context, the other options in the ul (Google Auth & Voice Auth) are identical to the SMS li.
Ideally, I would want to do something like this, but I feel that I am way off:
selector: 'li[data-se$="SMS"] + a[class$="button link-button"]'
Why not select by the data attribute?
If you need to "click" on the button, you'll need to decide when that happens. You could for example do it on page load:
const sms = document.querySelector("[data-se='SMS']");
const simulated_button_click = sms.getElementsByClassName('link-button')[0];<body onload="simulated_button_click.click()">
...
<div class="enroll-factor-list">
<ul class="list-content">
<li data-se="GOOGLE_AUTH" class="enroll-factor-row clearfix">
<div class="enroll-factor-icon-container">
<div class="enroll-factor-button">
<a class="button link-button" href="#">Setup</a>
</div>
</div>
</li>
<li data-se="SMS" class="enroll-factor-row clearfix">
<div class="enroll-factor-icon-container">
<div class="enroll-factor-button">
<a class="button link-button" href="#">Setup</a>
</div>
</div>
</li>
</ul>
</div>
...
</body>I was able to select the button with use of the descendant combinator.
https://www.w3.org/TR/selectors-3/#descendant-combinators
selector: 'li[data-se="SMS"] * a[data-se$="button"]'