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

Question

Protractor 测试在 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() 本身并不是一个可靠的解决方案（参见为什么）。您需要一个 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);

// ...

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

protractor list filter test fails, counting 0 instead of expected number

angularjs-ng-repeat

angularjs-filter

protractor