Protractor - ngFor 循环

Question

我正在使用最新版本的Angular和Protractor，想知道如何在我的测试中使用ngFor循环。

在以前的AngularJS应用程序中，这很简单。我只需要使用类似于by.repeater的内容即可完成神奇的事情。

然而，在现在的Angular 4 APP中，我就没有那么幸运了。 根据这个问题，还不支持。另一方面，我看到了一个stackoverflow的问题，有人已经在使用它。

无论如何，我的HTML代码如下：

<div *ngFor="let org of userOrgList; count as count">
   <button class="btn btn-default btn-lg col-xs-12" type="submit"  (click)="selectOrg(org.id)">{{org.name}}</button>
</div>

我的测试看起来像这样：

var organizations = element.all(by.repeater('org of userOrgList'));

it('should have an org with specific name', function() {
    expect(organizations.get(0).getText()).toEqual('myOrgName');
});

我遇到了一个错误:

失败：下标越界。尝试访问索引为0的元素，但只有0个元素与定位器by.repeater("let org of userOrgList; count as count")匹配

我的问题是： 如何在我的protractor测试中使用ngFor

- Andurit

---

遇到了同样的问题，并发现有一个开放的问题来支持 Angular 2+ 的 *ngFor https://github.com/angular/protractor/issues/3205 - HaC

是的，伙计，这就是我在问题中链接的同一个票。 - Andurit

Answer 1

我找到了一个适合我的解决方案，但与使用repeater时相比仍然不够简洁。

// HTML FILE: Added id to DIV 
<div *ngFor="let org of userOrgList; count as count" id="organizations">
    <button class="btn btn-default btn-lg col-xs-12" type="submit"  (click)="selectOrg(org.id)">{{org.name}}</button>
</div>

//TEST FILE:
var organizations = element.all(by.id('organizations')).all(by.css('button'));
var firstOrg = organizations.get(0);
it('should have an org with specific name', function() {
    expect(firstOrg.getText()).toEqual('Name you expect');
});

使用标准表格复制器可能会像这样：

var data = element.all(by.css('table[name='' + TableName + '']')).all(by.css('tr td'));
expect(data.get(0).getText()).toEqual('0');

- Andurit