javascript 量角器：如何定位给定元素的同级？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23720398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Protractor: How to locate a sibling of a given element?
提问by user1879408
<div>
<a href='...'>LINK</a>
<img class='image' />
</div>
<div>
...
</div>
I want to get a protractor element for the imgtag with imageclass. I already know the link text 'LINK'. In other words, "How do I locate a sibling of a given element?".
我想为img带有image类的标签获取一个量角器元素。我已经知道链接文本“LINK”。换句话说，“我如何定位给定元素的同级？”。
The first line of the code could look like this:
代码的第一行可能如下所示：
browser.findElement(by.linkText('LINK'))
Any ideas?
有任何想法吗？
Thanks & Cheers
感谢和干杯
回答by user1879408
Thanks for the inspiration. Here's my solution, not the one I was hoping for, but it works:
谢谢你的灵感。这是我的解决方案，不是我希望的解决方案，但它有效：
element(by.css('???')).element(by.xpath('..')).element(by.css('???')).click();
The chaining and the by.xpath, which allows to get back to the parent are the keys of the solution.
链接和允许返回父级的 by.xpath 是解决方案的关键。
回答by Khanh Hua
This is what I actually implement on a Page Object:
这是我在页面对象上实际实现的：
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'));
The page is based on Bootstrap along with Bootstrap Select. Anyways, we traverse the DOM along the following-siblingaxis. Refer to XPATH specification for yourself.
该页面基于 Bootstrap 和 Bootstrap Select。无论如何，我们沿following-sibling轴遍历 DOM 。请自行参阅 XPATH 规范。
回答by Khanh Hua
Using Xpath selectors is not a better choice as it slows down the element finding mechanism.
使用 Xpath 选择器并不是更好的选择，因为它会减慢元素查找机制的速度。
I have designed a plugin to address this specific issues: protractor-css-booster
我设计了一个插件来解决这个特定问题：protractor-css-booster
The plugin provides some handly locators to find out siblings in a better way and most importantly with CSS selector.
该插件提供了一些方便的定位器，以更好的方式找到兄弟姐妹，最重要的是使用 CSS 选择器。
using this plugin, you can directly use:
使用这个插件，你可以直接使用：
var elem = await element(by.cssContainingText('a','link text')).nextSibling();
elem.click(); //proceed with your work
or, use this as by-locator
或者，使用它作为定位器
var elem = element(by.cssContainingText('a','link text')).element(by.followingSibling('img'));
You can always checkout the other handy methods available here...
您可以随时在此处查看其他可用的方便方法...
Now, you can find web elements such as:
现在，您可以找到 Web 元素，例如：
- Finding Grand Parent Element
- Finding Parent Element
- Finding Next Sibling
- Finding Previous Sibling
- Finding any Following Sibling
- Finding First Child Element
- Finding Last Child Element
- 查找祖父元素
- 查找父元素
- 寻找下一个兄弟姐妹
- 寻找以前的兄弟姐妹
- 寻找任何以下兄弟姐妹
- 查找第一个子元素
- 查找最后一个子元素
And, guess what, everything you can find using CSS Selectors
而且，猜猜看，您可以使用 CSS 选择器找到的一切
Hope, it will help you...
希望，它会帮助你...
