How to find element inside 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-gray" range inside the first ng-repeat element in the protractor?

I tried:

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

But I get "TypeError: Object [object Object] does not have a method" findElement ""

Answer 1

You do not need to “find” the item again. Try using item explorer

Open the item explorer and go to the desired page:

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

Then try the following command:

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

I do not think that it will show any text, because there is no text in html.

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

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

Answer 2

API, :

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

:

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

Answer 3

Give your pro-numbers the id attribute using the $ index from repeat, then you can go straight to them.

<span class="bubble-grey" id="item_{{$index}}">
    {{ item }}
</span>