How to set collection of *ngFor from protractor in Angular 4.0?

Question

app.component.html

<div class="student-list" *ngFor="let student of students">
    <p>{{student.name}}</p>
</div>

I want to test whether all students have name. But students is a list which is getting set in app.component.ts.

Now how should I set the students from protractor?

I have done following

element(by.binding('students')).sendKeys(['abc', 'xyz']);

But this is not working, it throws Failed: unknown error: angular is not defined. What is the correct way?

Sajeetharan · Answer 1 · 2017-10-14T06:38:17.607

2

angular selectors such as by.model and by.binding are not supported Angular2 and above versions.

As per the docs

Protractor works with AngularJS versions greater than 1.0.6/1.1.4, and is compatible with Angular applications. Note that for Angular apps, the by.binding() and by.model() locators are not supported. We recommend using by.css().

you can see the examples here

https://angular.io/guide/upgrade#e2e-tests

EDIT

To solve your issue you can use Id

HTML

<div  *ngFor="let student of students" id="students">
    <p  class="student-list"> {{student.name}}</p>
</div>

test

var students = element.all(by.id('students')).all(by.css('student-list'));
var firstOrg = organizations.get(0);
it('should have an org with specific name', function() {
    expect(firstOrg.getText()).toEqual('Name you expect');
});

edited Oct 14 '17 at 06:38

answered Oct 14 '17 at 05:40

Sajeetharan

216,225
63
350
396

okay. But if I use by.css like element(by.css('.student-list')).sendKeys(['abc', 'xyz']); This also fails saying No element found using locator: By(css selector, .student-list) – Sanket Achari Oct 14 '17 at 06:25
it should be without . – Sajeetharan Oct 14 '17 at 06:26
tried without . like element(by.css('student-list')).sendKeys(['abc', 'xyz']); still no element found – Sanket Achari Oct 14 '17 at 06:28
1

you can use element by class, i added an example above – Sajeetharan Oct 14 '17 at 06:38
You are right about accessing the students collection. But before accessing students collection, it to be set with some value SendKeys(['xyz', 'abc']). Can you share some ideas how to set collection? – Sanket Achari Oct 14 '17 at 06:51
you should do some research on that, even i have not much idea on that. mark if the answer helped – Sajeetharan Oct 14 '17 at 06:52
Thanks for your invaluable inputs !! – Sanket Achari Oct 14 '17 at 06:53
i think you should do like students.get(0).sendKeys('abc'); students.get(1).sendKeys('xyz'); – Sajeetharan Oct 14 '17 at 07:09
initialiiy students is empty or has 0 elements. So students.get(0) or students.get(anything) will not work. – Sanket Achari Oct 14 '17 at 07:18

AddWeb Solution Pvt Ltd · Answer 2 · 2017-10-14T06:14:09.277

0

<div class="student-list" *ngFor="let student of students">
    <p *ngIf="student.name">{{student.name}}</p>
</div>

This is one of the way using which you can display only those users who has name.

edited Oct 14 '17 at 06:14

answered Oct 14 '17 at 05:38

AddWeb Solution Pvt Ltd

21,025
5
26
57

How to set collection of *ngFor from protractor in Angular 4.0?

2 Answers2