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

Question

假设有一个按钮可以触发某种需要一段时间的数据处理。在处理过程中，我想通过显示"Working..."、"Working very hard..."、"Almost there..."等消息来告诉用户我们在哪里。保证所有这些消息都会在之前一个接一个地出现处理完成。任务是用量角器检查这个场景。

所以，这是一个示例代码：

<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);

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

Testing a sequence of async updates with Protractor?

angularjs

protractor