Protractor: How can I get the next tag

Question

Is it possible to get an element after another element? (not subelements)

HTML code:

<input id="first-input" type="text"/>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<input id="second-input" type="text"/>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<input id="third-input" type="text"/>
<ul>
    <li>1</li>
    <li>2</li>
</ul>

How can I get the ul following element(by.id('second-input'))?

Here's my understanding:

element(by.id('second-input')).element(by.tagName('ul')) // This doesn't work because this looks for sub-elements in <input id="second-input">
element.all(by.tagName('ul')).first() // This doesn't work because it gets the 'ul' following <input id="first-input">
element(by.id('second-input')).element.all(by.tagName('ul')) // This doesn't work because this looks for all 'ul' elements as sub-elements of <input id="second-input">

In my case, these 'ul's don't have unique ids, or anything unique.

Answer 1

You can use by.xpath() and ask for the following ul sibling:

element(by.id('second-input')).element(by.xpath('following-sibling::ul'));

Or, in one go:

element(by.xpath('//input[@id="second-input"]/following-sibling::ul'));

---

Another option would be to use by.css() with an adjacent sibling selector:

element(by.css('#second-input + ul'));