CODEWITHSUNDEEP
javascriptjasminekarma-runnerprotractorui-testing
user1879408
user1879408

Reputation: 2028

Protractor: How to locate a sibling of a given element?

<div>
   <a href='...'>LINK</a>
   <img class='image' />
</div>
<div>
   ...
</div>

I want to get a protractor element for the img tag with image class. I already know the link text 'LINK'. In other words, "How do I locate a sibling of a given element?".

The first line of the code could look like this:

browser.findElement(by.linkText('LINK'))

Any ideas?

Thanks & Cheers

Upvotes: 15

Views: 14513

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('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:

  1. Finding Grand Parent Element
  2. Finding Parent Element
  3. Finding Next Sibling
  4. Finding Previous Sibling
  5. Finding any Following Sibling
  6. Finding First Child Element
  7. Finding Last Child Element

And, guess what, everything you can find using 💥 CSS Selectors 💥

Hope, it will help you...

Upvotes: 0

user1879408
user1879408

Reputation: 2028

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.

Upvotes: 25

Khanh Hua
Khanh Hua

Reputation: 1116

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-sibling axis. Refer to XPATH specification for yourself.

Upvotes: 1

Related Questions