是否有可能在 Protractor 中使用 cssContainingText 获取下一个兄弟姐妹

Question

是否可以使用 by.cssContainingText()

获取下一个兄弟姐妹

示例： HTML 代码如下：

<div ng-repeat="SomeNgRepeat" class="ng-scope">
    <div class="text-label" >SomeText</div>
    <div class="some-class">SomeValue</div>
</div>

使用以下方法获取元素：

element(by.cssContainingText('div.text-label','SomeText'))

现在找到上述元素的下一个兄弟。

我知道 css=form input.username + input 找到兄弟姐妹的方法。但是，这对我来说不起作用！

我认为 'chaining' 可以用来实现这个，但不知道怎么做！

谢谢，萨克什

Answer 1

您可以使用 node.nextSibling 选择器。看看这个 article

Answer 2

如果您使用 by.xpath() 一次性得到它会怎么样：

element(by.xpath('//div[@class="text-label" and . = "SomeText"]/following-sibling::div'))

或者，您可以将其与 cssContainingText() 结合使用：

element(by.cssContainingText('div.text-label','SomeText')).element(by.xpath('following-sibling::div'))

Answer 3

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

我设计了一个插件来解决这个具体问题：protractor-css-booster

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

使用本插件，可以直接使用：

var elem = await element(by.cssContainingText('div.text-label','SomeText')).nextSibling();

或者，使用助推器作为定位器

var elem = element(by.cssContainingText('div.text-label','SomeText')).element(by.followingSibling('div'));

希望对你有所帮助...

Is it possible to get next sibling using cssContainingText in Protractor