Is it possible to get next sibling using cssContainingText in Protractor

Is it possible to get the next sibling by using by.cssContainingText()

Example: HTML code is like below:

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

Get element by using:

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

Now find the next sibling of the above element.

I know of css=form input.username + input way of finding the sibling. However, this is not working in my case!

I think 'chaining' can be used to achieve this, but don't know How!

Thanks, Sakshi

Answers:

Answer

What if you would get it in one go using by.xpath():

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

Or, you can combine it with cssContainingText():

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

You could use the node.nextSibling selector. Check out this article

Answer

Using Xpath selectors is not a better choice as it slows down the element finding mechanism.

I have designed a plugin to address this specific issues: protractor-css-booster

The plugin provides some handly locators to find out siblings in a better way and most importantly with CSS selector.

using this plugin, you can directly use:

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

or, use booster as by-locator

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

Hope, it will help you...

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.