量角器列表过滤测试失败，计数为0而不是预期数

Question

量角器测试在4次测试中失败，从列表中计数0而不是预期的过滤值。但是，实际程序中的过滤器工作良好。

测试开始了。值在测试期间输入到搜索文本框中。考试有什么问题吗？怎么解决？

下面是一个测试：

​

'use strict';

// Angular E2E Testing Guide:
// https://docs.angularjs.org/guide/e2e-testing

describe('LLO 2016', function() {

  describe('edit-leerling', function() {

    beforeEach(function() {
      browser.get('index.html#/leerlingen');
    });

    it('should filter the leerlingen list as a user types into the search box', function() {
      var editLeerling = element.all(by.repeater('(id, leerling) in leerlingen'));
      var query = element(by.model('mentorQuery'));

      expect(editLeerling.count()).toBe(248);

      query.sendKeys('5H');
      expect(editLeerling.count()).toBe(163);

      query.clear();
      query.sendKeys('6V');
      expect(editLeerling.count()).toBe(85);

      query.clear();
      query.sendKeys('WIND');
      expect(editLeerling.count()).toBe(22);
    });

  });

});

​

下面是HTML：

​

<div class="panel-heading">
  <h3 class="panel-title">Leerlingenlijst</h3><br />
  Zoeken: <input ng-model="mentorQuery" />
</div>

<div class="panel-body">
  <div class="table-responsive">
    <table class="table table-hover">
      <tr>
        <th>Nr.</th>
        <th>Mentor</th>
        <th>Klas</th>
        <th>Leerling Naam</th>
        <th></th>
        <th></th>
      </tr>
      <tr ng-repeat="(id, leerling) in leerlingen | filter: mentorQuery">
        <form class="form-inline">
          <td><span>{{leerling.leerlingNummer}}</span></td>
          <td><span>{{leerling.leerlingMentor}}</span></td>
          <td><span>{{leerling.leerlingKlas}}</span></td>
          <td><input type="text" class="form-control" ng-model="leerling.leerlingNaam"></td>
          <td>
            <button type="button" class="btn btn-default" ng-click="update({id: id})">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
          </td>
          <td>
            <button type="button" class="btn btn-default" ng-click="remove({id: id})">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </form>
      </tr>
    </table>
  </div>
</div>

​

Answer 1

好的，我们已经在评论中指出，这是一个时间问题-搜索结果还没有加载时，你的期望。

browser.sleep()本身并不是一个可靠的解决方案(参见this为什么)。您需要一个browser.wait()和一个等待条件。至少我们可以检查是否存在至少一个搜索结果：

var EC = protractor.ExpectedConditions;
var elm = element(by.repeater('(id, leerling) in leerlingen'));

browser.wait(EC.presenceOf(elm), 5000);

var editLeerling = element.all(by.repeater('(id, leerling) in leerlingen'));
var query = element(by.model('mentorQuery'));

expect(editLeerling.count()).toBe(248);

// ...