CODEWITHSUNDEEP
javascriptangularjscss-selectorsprotractorend-to-end
Sakshi Singla
Sakshi Singla

Reputation: 2502

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

Upvotes: 6

Views: 8018

Answers (3)

user9975398
user9975398

Reputation:

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...

Upvotes: 0

alecxe
alecxe

Reputation: 473873

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'))

Upvotes: 10

Jackson
Jackson

Reputation: 3518

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

Upvotes: 0

Related Questions