Search only children of a protractor webElementFinder using CSS

Question

I have a protractor webElementFinder testElement. I want to match only its div children (NOT grandchildren or any other further descendants) and thus testElement.find('div') will not work as it will find all descendant divs.

If protractor worked like jQuery (which would make sense since Angular is smart enough to use jQuery if its present and protractor is built with Angular in mind), I would just do testElement.find(' > div') which would work despite the find argument not being a valid CSS selector by itself; however because protractor just uses built in Element functions, that CSS selector is not valid by itself, and protractor throws an error.

I could go this route Angular JS, Protractor locator, get direct children of element since xpath natively lets you look at children, but I'd much rather use CSS than xpath.

score 3 · Accepted Answer · answered Mar 31 '17 at 19:57

3

There is no direct and easy way to have a direct parent-child locator from the current element. A common way to solve it is to use the ./ XPath expression, but there is also this "hack" that uses locator():

testElement.$(testElement.locator().value + ' > div');

answered Mar 31 '17 at 19:57

alecxe

462,703
120
1,088
1,195

1

Selecting this as the answer since it avoids restating the selector (i.e. it follows DRY). – Tahsis Claus Apr 01 '17 at 20:35
Great idea, but in my case `.locator().value` returns an xpath, not a css. – hoeni Jul 12 '18 at 07:20

score 2 · Answer 2 · answered Apr 01 '17 at 08:42

2

Just use:

$('testElement > div')

answered Apr 01 '17 at 08:42

Bob Bai

283
4
20

score 0 · Answer 3 · answered Apr 01 '17 at 20:20

The solution depends on a few things:

if testElement is an ElementFinder (const testelement = element(by.css('.some-selector'))), then you can do testelement.all(by.css('div')). Be aware of the all, because you are talking about chrildren, you will find all children with all. It will return an ElementArrayFinder, see the docs
if testElement is a selector (const foo = '.testElement'), then you can do $$('.testElement > div'). This will return all the It will return an ElementArrayFinder, see the docs

I hope you can add the selector of testElement to the css selector with the >, the advantage you will get from this is that you will get all elements that are a direct children of the testElement-selector

Search only children of a protractor webElementFinder using CSS

3 Answers3