html - 使用 css 选择器获取深度嵌套的按钮

Question

我目前正在对没有任何可轻松识别标签的应用程序进行端到端测试。我需要单击一个嵌套很深的按钮，这些按钮有时与其他按钮具有完全相同的名称和属性。

HTML 代码看起来像这样:

<div class='.ui .row'>
  <div class='.ui .fluid'>
    <div class='.content'>
      <div>
        <div class='.field'>
          <button>Button</button>
        </div>
      </div>
    </div>
    <div class='.content'>
      <div>
        <div>Some other stuff</div>
        <div class='.field'>
           <button>Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

因为我们有两个同名的，所以我不能只执行 browser.click('button*=Button')。我目前解决它的方式是这样的:

browser.click('div > div > div > div > div > button')

当按下第二个按钮时，我必须做这样的事情:

browser.click('div > div > div:nth-child(2) > div > div:nth-child(2) > button')

尽管它可以工作，但我遇到了一些问题: - 它看起来不漂亮，对于那些可能刚刚拿起这段代码的人来说不容易阅读 - 即使对应用程序进行最细微的更改，它也会变得陈旧，即使它与按钮无关

我的问题是在这些情况下是否有更好的选择这些按钮。

Answer 1

如果您的标记保持相似，您可以利用第二个按钮嵌套在一个 div 中，该 div 是另一个 div 的 sibling。示例:

/* style the first button */
button {
  color: red;
}

/* style the second button */
div + div button {
  color: blue;
}

<div>
  <div>
    <div>
      <div>
        <div>
          <button>Button</button>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>Some other stuff</div>
        <div>
           <button>Button</button>
        </div>
      </div>
    </div>
  </div>
</div>