量角器：如何找到给定元素的同级？

Question

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

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

代码的第一行可能看起来像这样：

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

有什么想法吗？

感谢与欢呼

Answer 1

感谢您的灵感。这是我的解决方案，不是我所希望的，但是它可以工作：

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

链接和by.xpath，可以返回到父级是解决方案的关键。

Answer 2

这是我实际上在Page对象上实现的内容：

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

现在，您可以找到Web元素，例如：

1. 查找祖父母元素
2. 查找父元素
3. 查找下一个兄弟姐妹
4. 查找上一个兄弟姐妹
5. 查找随后的兄弟姐妹
6. 查找第一个子元素
7. 查找最后一个子元素

而且，猜猜什么，您可以使用💥CSS Selectors everything找到所有内容

希望，它将帮助您...