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

Question

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

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

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

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

有任何想法吗？

感谢和干杯

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 = 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'));

您可以随时在此处查看其他可用的方便方法...

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

1. 查找祖父元素
2. 查找父元素
3. 寻找下一个兄弟姐妹
4. 寻找以前的兄弟姐妹
5. 寻找任何以下兄弟姐妹
6. 查找第一个子元素
7. 查找最后一个子元素

而且，你猜怎么着，你可以使用 💥 CSS 选择器找到的一切💥

希望，它会帮助你...