Protractor find element inside a repeater

Question

Below is my markup

<tr ng-repeat="post in posts">
  <td ng-click="activePost(post)" class="title">{{post.title}}</td>
  <td><button class="btn btn-danger" ng-click="delete(post)">Delete</button>
  </td>
</tr>

I'm trying to get the element with the title class.

The code I use to access the repeater is:

postsList = element.all(by.repeater('post in posts'));

Is there a way to get the element by doing something like the following in jQuery:

var titleText = $("tr:first").find(".title").text();

Is there a way of doing something similar to this with protractor?

score 31 · Accepted Answer · edited Jul 13 '15 at 17:41

31

this should work for your example:

element.all(by.repeater('post in posts')).then(function(posts) {
   var titleElement = posts[0].element(by.className('title'));
   expect(titleElement.getText()).toEqual('YourEnteredTitle');
});

edited Jul 13 '15 at 17:41

Community

1
1

answered Mar 31 '14 at 12:07

nilsK

4,323
2
26
40

Wasn't able to find it in the documentation. Thank you, that did it. – Subtubes Mar 31 '14 at 15:28
1

Thanks - missing bracket on first line as pointed out by Voles – trees_are_great Jan 23 '15 at 15:25
I'd be interested to know how this works now that element locators don't return a promise and there for using .then no longer works, do you just do element.all(by.repeater('post in posts))[0].element(by.className('title')); ? – Sirk May 27 '15 at 12:26
a little late ... sorry, i cant help you with this. i changed the job (back to C#) and i am not fimiliar with current protractor syntax. if you are still interested to know this, please open a new question. – nilsK Jun 02 '15 at 05:42

score 21 · Answer 2 · edited May 23 '17 at 12:10

21

The answer from nilsK helped me, but didn't work completely. The code below did the trick:

element.all(by.repeater('post in posts')).then(function(posts) {
   var titleElement = posts[0].element(by.className('title'));
   expect(titleElement.getText()).toEqual('YourEnteredTitle');
});

edited May 23 '17 at 12:10

Community

1
1

answered Jul 30 '14 at 11:38

ndequeker

7,932
7
61
93

score 6 · Answer 3 · answered Jun 17 '15 at 15:00

6

you have to find a element inside a array as explained here https://github.com/angular/protractor/issues/877

var items = element.all(by.repeater('userGroup in userGroups')).filter(function(item) {
     return item.element(by.binding('userGroup.name')).getText().then(function(label) {
           return label === 'MyGroupName';
     });
  });
items.get(0).element(by.css('.buttongochose')).click();

answered Jun 17 '15 at 15:00

Silvio Troia

1,439
19
36

I think this is the best answer, because it allow you to filter by text. – Oliver Dec 03 '15 at 16:01

score 4 · Answer 4 · answered Aug 26 '15 at 11:30

4

From the docs: https://github.com/angular/protractor/blob/master/docs/locators.md

var clickable = element.all(by.repeater('post in posts')).first().all(by.tagName('td')).first();

answered Aug 26 '15 at 11:30

pansay

687
8
11

It's not exactly what I was looking for, I mean, it's not the exact chunk of code, but gave me an awesome idea! Thanks! :-) – ebragaparah May 04 '16 at 14:43

score 2 · Answer 5 · answered May 13 '15 at 16:40

2

An even better solution:

expect( $$(by.repeater('post in posts')).get(0).$('.title').getText() ).toBe('Your title');

answered May 13 '15 at 16:40

Marcin Wolniewicz

213
1
9

score 0 · Answer 6 · answered Feb 09 '21 at 22:56

More readable way doing the same these days would be

it('test case', async () => {
  let repeaters = element.all(by.repeater('post in posts'));
  let titleElement = repeaters.get(0).element(by.className('title'));
  expect(await titleElement.getText()).toEqual('YourEnteredTitle');
});

Protractor find element inside a repeater

6 Answers6

Linked