量角器：如何定位给定元素的兄弟？答案

【问题标题】：Protractor: How to locate a sibling of a given element?量角器：如何定位给定元素的兄弟？
【发布时间】：2014-07-06 09:20:38
【问题描述】：

<div>
   <a href='...'>LINK</a>
   <img class='image' />
</div>
<div>
   ...
</div>

我想用image 类为img 标签获取量角器元素。我已经知道链接文本“LINK”。换句话说，“如何定位给定元素的同级元素？”。

代码的第一行可能如下所示：

browser.findElement(by.linkText('LINK'))

有什么想法吗？

感谢和干杯

【问题讨论】：

你能抓住父母吗？因为 elementFinder 可以链接到已知父级中查找：github.com/angular/protractor/blob/master/docs/… 但在我看来，此功能缺失，您可以在 Protractor Github 上询问是否有解决方法或建议拉取请求；）

标签： javascript jasmine karma-runner protractor ui-testing

【解决方案1】：

感谢您的启发。这是我的解决方案，不是我希望的，但它有效：

element(by.css('???')).element(by.xpath('..')).element(by.css('???')).click();

链接和允许返回父级的 by.xpath 是解决方案的关键。

【讨论】：

如果其他人访问此页面：Protractor style guide 要求永远不要使用 XPath。但在我们的案例中，要找到兄弟姐妹，目前似乎没有更好的解决方案。

【解决方案2】：

这是我在页面对象上实际实现的：

  this.widgets['select-status'] = this.ids['select-status']
      .element(by.xpath('following-sibling::div[1]'));
  this.widgets['select-status.dropdown'] = element(by.css('.btn-group.bootstrap-select.open'));

该页面基于 Bootstrap 以及 Bootstrap Select。不管怎样，我们沿着following-sibling 轴遍历DOM。请自行参考 XPATH 规范。

【讨论】：

它也对我有用。即var result = cols.all(by.cssContainingText('span', 'MY TEXT')); var sibElem = result.all(by.xpath("following-sibling::div[1]")).first();

【解决方案3】：

使用 Xpath 选择器并不是一个更好的选择，因为它会减慢元素查找机制。

我设计了一个插件来解决这个特定问题：protractor-css-booster

该插件提供了一些方便的定位器，以更好地查找兄弟姐妹，最重要的是使用 CSS 选择器。

使用这个插件，可以直接使用：

var elem = await element(by.cssContainingText('a','link text')).nextSibling();

elem.click(); //proceed with your work

或者，将其用作定位符

var elem = element(by.cssContainingText('a','link text')).element(by.followingSibling('img'));

您可以随时查看其他可用的便捷方法here...

现在，您可以找到以下网页元素：

寻找祖父元素
查找父元素
寻找下一个兄弟姐妹
查找上一个兄弟姐妹
查找任何以下兄弟姐妹
查找第一个子元素
查找最后一个子元素

你猜怎么着，使用 ? CSS 选择器 ?

希望对你有帮助...

【讨论】：