Chaining all statements in protractor

Question

My first stack overflow question....

I'm trying to chain an all statements in protractor but I'm getting the error.

TypeError: Object [object Object] has no method 'all'

I'm looking at the API code on the following page

http://angular.github.io/protractor/#/api?view=ElementArrayFinder.prototype.all

Which indicates that you can use element.all(locator).all(locator)

it gives this as an example

var foo = element.all(by.css('.parent')).all(by.css('.foo'))

my code seems to be very similar, and I'm confused why I'm getting this error. I've tried structuring the code exactly like they have it on the API example. I've also tried doing element.all(locator).element.all(locator).

My GOAL here is to take a Ng-repeat of AREFS; find the one that has the text equal to r_string (which is a string generated earlier and added to the page; expect that element to exist; click that element;

Some Attempts:

    var parent = element.all(by.repeater('labgroup in LabGroupService.allLabGroups'));
    var child = parent.all(by.xpath('//option[text() = \'' + r_string + '\']'));
    expect(child.count()).toBe('1');

and

    var elem = element.all(by.repeater('labgroup in LabGroupService.allLabGroups')).all(by.xpath('//option[text() = \'' + r_string + '\']'));
    expect(elem.count()).toBe('1');

Finally here is a snippet of the HTML i'm working with.

        <a ui-sref="root.user-management.labgroup({labgroupID: labgroup.id})" class="ng-binding" href="#/management/labgroup/43">1kvub4wgCvY9QfA</a>
    </dd><!-- end ngRepeat: labgroup in LabGroupService.allLabGroups --><dd ng-repeat="labgroup in LabGroupService.allLabGroups" class="ng-scope">
        <a ui-sref="root.user-management.labgroup({labgroupID: labgroup.id})" class="ng-binding" href="#/management/labgroup/47">3PNsny8lUMlMwBw</a>
    </dd><!-- end ngRepeat: labgroup in LabGroupService.allLabGroups --><dd ng-repeat="labgroup in LabGroupService.allLabGroups" class="ng-scope">
        <a ui-sref="root.user-management.labgroup({labgroupID: labgroup.id})" class="ng-binding" href="#/management/labgroup/42">c3NOI7Z3933ui3a</a>
    </dd><!-- end ngRepeat: labgroup in LabGroupService.allLabGroups --><dd ng-repeat="labgroup in LabGroupService.allLabGroups" class="ng-scope">

Edit----------------------------------------------------------------------------------------

I'm starting to wonder if this is a version error or maybe a protractor error. In an attempt to debug I've literally included the source code from the API page.

    <div id='id1' class="parent">
      <ul>
        <li class="foo">1a</li>
        <li class="baz">1b</li>
      </ul>
    </div>
    <div id='id2' class="parent">
     <ul>
       <li class="foo">2a</li>
       <li class="bar">2b</li>
     </ul>
     </div>

and the example from the source page.

var foo = element.all(by.css('.parent')).all(by.css('.foo'))
expect(foo.getText()).toEqual(['1a', '2a'])

I'm still getting that same error.

TypeError: Object [object Object] has no method 'all'

Edit 2-------------------------------------------------------------------------------

I managed to solve this issue by adding a 'data-class = labgroup-link' into the actual html code and by using this protractor code.

    element.all(by.css('[data-class="labgroup-link"]')).filter(function(elem, index) {
        return elem.getText().then(function(text) {
            return text === r_string;
        });
    }).then(function(filteredElements) {
        expect(filteredElements[0].isPresent()).toBe(true);
        filteredElements[0].click();
        ptor.sleep(100);
    });

Solution ----------------------------------------

Had to upgrade protractor to get the latest API.

Answer 1

Protractor >= 1.3.0

Should work given: https://github.com/angular/protractor/blob/f7c3c370a239218f6143a/lib/protractor.js#L177

var foo = element.all(by.css('.parent')).all(by.css('.foo'));

Protractor < 1.3.0

ElementArrayFinder doesn't have an all method: https://github.com/angular/protractor/blob/master/docs/api.md#api-elementarrayfinder-prototype-get therefore:

TypeError: Object [object Object] has no method 'all'

Perhaps you want to

var foo = element(by.css('.parent')).all(by.css('.foo'));
// or shorter
var foo = $('.parent').$$('.foo');

Insetad of doing

var foo = element.all(by.css('.parent')).all(by.css('.foo'));