How to find an element inside a ng-repeat in protractor

Question

I have the following html:

<li ng-repeat="item in items">
    Some Test
    <span class="bubble-grey">
        {{ item }}
    </span>
</li>

How to find the ".bubble-grey" span inside the first ng-repeat element in protractor?

I have tried:

element.all(by.repeater('item in items')).get(0).findElement(by.css(".bubble-grey")).getText()

But I get "TypeError: Object [object Object] has no method 'findElement'"

Answer 1

You don't need to 'find' the element again. Try using the element explorer

Open the element explorer and navigate to the desired page:

cd \node_modules\protractor\bin
node ./elementexplorer.js <your url>

Then try this command:

element.all(by.repeater('item in items')).get(0).getText()

I don't think it will show any text, because there is no text in the html.

If you want to get the "Some Test" text, try it:

element(by.repeater('item in items')).getText()

Answer 2

Looking at the API, instead of:

.findElement(by.css(".bubble-grey"));

you want:

.element(by.css(".bubble-grey"));