Question

我目前正在对没有任何容易识别标签的应用程序进行一些E2E测试。我需要点击一个深层嵌套的按钮，这些按钮有时会与其他按钮具有完全相同的名称和属性。

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 sibling的div中。例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

对于最容易阅读的格式，Selenium文档提到它会回退到使用Sizzle，如果浏览器不支持查询，那么您应该能够使用:contains()来允许您选择元素通过它们包含的文字，例如：

button:contains("Button")`

等

对于WebdriverIO，使用此功能时syntax似乎略有不同：

browser.getTagName('button=Button'); // captures: "<button>Button</button>"

WebdriverIO documentation

Selenium documentation

Sizzle documentation for :contains()

Answer 3

我会使用XPath

//div[.='Some other stuff']/following::button

第二个按钮前面有DIV标签，＆＃34;其他一些东西＆＃34;。您可以使用它来区分这两个按钮。

Answer 4

我肯定会使用Xpath :)

为什么不使用索引？

第一个：

//button[1]

为最后一个：

//button[last()]

Answer 5

有很多方法可以访问该元素：

一些例子：

// to access the first button 
$$('button')[0].click();

// to access the second button 
$$('button')[1].click();

注意：如果该页面中只有两个按钮，则可以使用上面的内容。如果您有更多按钮，那么理想情况下不应使用

或者如果你想链接这里提到的选择器http://webdriver.io/api/utility/$.html

let buttonContainer = $('.fluid');
buttonContainer.$$('button')[0].click();
buttonContainer.$$('button')[1].click();

或者，如果您想按div .content进行访问，那么

$('.fluid div.content:nth-child(1) >button').click();
$('.fluid div.content:nth-child(2) >button').click();

根据您的方便，由您决定如何访问DOM元素。

使用css选择器抓取深层嵌套按钮

5 个答案: