是否可以在 Protractor 中使用 cssContainingText 获得下一个兄弟姐妹答案

【问题标题】：Is it possible to get next sibling using cssContainingText in Protractor是否可以在 Protractor 中使用 cssContainingText 获得下一个兄弟姐妹
【发布时间】：2020-02-27 23:56:59
【问题描述】：

是否可以通过使用 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'可以用来实现这一点，但不知道如何！

谢谢，飒飒

【问题讨论】：

需要查看源 HTML。
已编辑问题以包含代码！
你试过nth-child方法吗？只需增加父 div 子编号即可获取下一个元素。

标签： javascript angularjs css-selectors protractor end-to-end

【解决方案1】：

如果您可以使用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'))

【讨论】：

非常感谢 alexce。这就像魔术:) 是否有一个链接包含所有这些以下兄弟类型的 css 选择器？如果没有，那么也许你可以在这里列出它们。这将使生活更轻松:)
@SakshiSingla 很高兴它成功了。至于 xpath-axes 相关信息，请参阅，例如，mozilla's developer docs。
我想在下面的 xpath 中添加一个“文本”搜索。有没有可能？（由于它是非角的，所以这里不支持链接！） browser.driver.findElements(by.xpath('//*[@id="some-id"]//tr/td[ 1]'));类似于：browser.driver.findElements(by.xpath('//*[@id="some-id"]//tr/td[1][.="sometext"]'));
browser.driver.findElement(by.xpath('//*[@id="someId"]//tr/td[1]/self::td[.="'some_text' "]')) 工作！！
@SakshiSingla 你又自己解决了:) 顺便说一句，你可以稍微简化一下表达式：//*[@id = "ID" and contains(., " here")]。

【解决方案2】：

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

【讨论】：

【解决方案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'));

希望对你有帮助...

【讨论】：