ajax - Protractor - 在 $http 调用后选择中继器中的元素

Question

我开始对我的sails.js/AngularJS 应用进行 Protractor 测试。简单地说，我的 HTML 中有以下类型的 ng-repeat:

<div ng-repeat="book in books">
  book.name
</div>

我的测试单击一个按钮，该按钮向服务器发送 $http POST 调用，创建另一本书，并在成功后将另一本书添加到 $scope.books。问题是测试失败了，因为当测试检查它的存在时，这本书还没有被创建。我知道我的定位器/过滤器可以工作，因为当再次运行测试时(= 在发送调用之前书存在)测试成功。

测试:

    element.all(by.buttonText('Save')).
        filter(function(elem) {return elem.isDisplayed();}).
        first().
        click();

    browser.sleep(500); // even this doesn't work :(

    element.all(by.repeater('book in books')).filter(function(elem, index) {
        return elem.getText().then(function(text) {
            return text === "nameOfBook";
        });
    })
    .then(function(books) {
        expect(books[0].isPresent()).toEqual(true);
    });

到目前为止，我遇到的答案似乎表明 Protractor 应该在继续之前自动等待 $http 调用完成，但在我的情况下似乎并非如此。

我什至尝试了 4000 毫秒左右的 sleep 时间，其中我已经可以在中继器中看到新元素，但测试仍然看到 books[0]如 undefined .再次运行测试时有效，因此问题不应该出在过滤器中，而是出在其他地方。

关于这个问题的任何见解？

Answer 1

您可以 explicitly wait使新书名出现在 DOM 中:

var EC = protractor.ExpectedConditions;

var elm = element(by.xpath("//div[. = 'nameOfBook']"));
browser.wait(EC.presenceOf(elm), 10000);

您还可以等待转发器中元素的数量增加:

var countOfElementsToBe = function(elms, expectedValue) {
  return elms.count().then(function (actualValue) {
      return expectedValue === actualValue;
  });
};

var books = element.all(by.repeater('book in books'));
books.count().then(function (booksCount) {
    browser.wait(countOfElementsToBe(books, booksCount + 1), 10000);
});

(未测试)