使用 Protractor 测试一系列异步更新？

Question

假设有一个按钮触发某种需要一段时间的数据处理。在处理过程中，我想通过显示“工作中……”、“非常努力……”、“快到了……”等消息来告诉用户我们在哪里。保证所有这些消息在处理完成之前会陆续出现。任务是用 Protractor 检查这个场景。

所以，这里有一个示例代码：

<div ng-controller="AppController">
  <p>{{message}}</p>
  <button type="button" ng-click="go()">Go!</button>
</div>
...
<script>
  angular.module('app', [])
  .controller("AppController", function($scope, $timeout) {
    $scope.message = "";
    $scope.go = function() {
      $scope.message = "Working...";
      $timeout(function() {
        $scope.message = "Working very hard...";
        $timeout(function() {
          $scope.message = "Almost there...";
          $timeout(function() {
            $scope.message = "Done!!!";
          }, 1000);
        }, 1000);          
      }, 1000);
    };
  });
</script>

我知道这种行为相对容易通过常规单元测试 (Jasmine) 进行测试，但我们假设这些 $timeout 调用实际上是后端通过 websocket 发送的异步更新。

是否可以用 Protractor 以某种方式测试这个更新序列？

这样直接的方法：

expect(element(by.binding('message')).getText()).toEqual('Working...');
expect(element(by.binding('message')).getText()).toEqual('Working very hard...');

不起作用。在我的情况下，测试失败：

Expected 'Working very hard...' to equal 'Working...'.

这是可以理解的，我假设 Protractor 只是等待所有待处理的事情完成后再继续。

我能想到的一种方法是，显式轮询 DOM 以监控元素内容何时发生变化。这是我想避免的。有没有更好的选择？

Answer 1

你可以试试新功能：expected conditions（10小时前添加）：

var EC = protractor.ExpectedConditions;

var message = element(by.binding('message');

browser.wait(EC.textToBePresentInElement(message, 'Working...'), 1000); 
browser.wait(EC.textToBePresentInElement(message, 'Working very hard...'), 1000); 
browser.wait(EC.textToBePresentInElement(message, 'Almost there...'), 1000); 
browser.wait(EC.textToBePresentInElement(message, 'Done!!!'), 1000);