Search code examples
javascripthtmlcssnightwatch.js

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


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.

UI

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

Solution

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