Question

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

我想获得带img类的image标记的量角器元素。我已经知道了链接文字＆＃39; LINK＆＃39;。换句话说，＆＃34;如何找到给定元素的兄弟？＆＃34;。

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

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

有什么想法吗？

谢谢＆amp;干杯

Answer 1

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

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

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

Answer 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规范。

Answer 3

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

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

该插件提供了一些方便的定位器，可以更好地找到同级，最重要的是使用CSS选择器。

使用此插件，您可以直接使用：

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

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

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

查找祖父母元素
查找父元素
查找下一个兄弟姐妹
查找先前的兄弟姐妹
查找任何后续兄弟姐妹
查找第一个子元素
查找最后一个子元素

然后猜猜，使用?CSS选择器everything可以找到的一切

希望，它将对您有帮助...

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

3 个答案: