Nightwatch - 如何 CSS select 嵌套按钮本身没有唯一标识符

Question

在图片中 'UI' 我需要 select 页面上的第二个 'Setup' 按钮。

我尝试了很多不同的组合来尝试 select 这个元素，但没有成功。我看过一些相关的帖子，但大多数都在谈论拥有 1 个父元素和 1 个或 2 个子元素。在这种情况下，我需要沿着这条路走：li2/div2/div/a。我只是不确定如何将它们串在一起。

不幸的是，Xpath 不是一个选项，因为 id 会随着会话的不同而变化。

UI

Inspecting the DOM

对于其他上下文，ul（Google 身份验证和语音身份验证）中的其他选项与 SMS li 相同。

理想情况下，我想做这样的事情，但我觉得我离得太远了：

selector: 'li[data-se$="SMS"] + a[class$="button link-button"]'

Answer 1

为什么不通过数据属性select？

如果您需要“点击”按钮，您需要决定何时发生。例如，您可以在页面加载时执行此操作：

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>

Answer 2

我能够 select 使用后代组合器的按钮。

https://www.w3.org/TR/selectors-3/#descendant-combinators

selector: 'li[data-se="SMS"] * a[data-se$="button"]'

Nightwatch - 如何 CSS select 嵌套按钮本身没有唯一标识符

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

javascript

html

css

nightwatch.js