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

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

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

  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 选择器可以找到的所有内容

希望，它会帮助你...