Nightwatch - How can I CSS select a nested button with no unique identifiers on the button itself-CodePudding

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.

Inspecting the DOM

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"]'

CodePudding user response：

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 onl oad="simulated_button_click.click()">
...
<div >
    <ul >
        <li data-se="GOOGLE_AUTH" >
            <div >
                <div >
                    <a  href="#">Setup</a>
                </div>
            </div>
      </li>
      <li data-se="SMS" >
            <div >
                <div >
                    <a  href="#">Setup</a>
                </div>
            </div>
      </li>
  </ul>
</div>
...
</body>

CodePudding user response：

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"]'