Select all elements within an element with Protractor

Question

Is there a solid way to select all the elements within an element? Let's assume we have the following structure

...
<div class="outer">
     <div class="inner"></div>
     <div class="inner"></div>
</div>
...

And the piece of code that selects outer for us is the following:

outer: { get: function () { return element(by.css(".outer")); } }

Now, if I want to select all the inner divs, with the following code:

inner: { get: function () { return this.outer.element.all(by.css(".inner")); } }

I get an error saying that element.all is not a function. Is there a good way around this?

Answer 1

The idea you are trying to use is actually correct - it is called "chaining" and was added in Protractor 0.17.0, it's just that you don't need that intermediate element. Replace:

this.outer.element.all(by.css(".inner"))

with:

this.outer.all(by.css(".inner"))

Also note that there are $ and $$ shortcuts for element(by.css()) and element.all(by.css()) - if you apply them:

outer: { get: function () { return $(".outer"); } }
inner: { get: function () { return this.outer.$$(".inner"); } }