使用量角器测试加载文本

Question

在我的angularjs应用程序中，我需要从远程获取一些数据，在此期间，我在页面上显示了“加载数据...”文本。

页面基本上是这样的：

<div ng-show="remoteData">
   {{remoteData}}
</div>
<div id="loading" ng-hide="remoteData">
   Loading data, wait ...
</div>

在angularjs代码中：

function SomeCtrl($scope, $http) {
    $http.get("/...").success(function(data) {
         $scope.remoteData = data;
    });
}

但是如何使用protractor对其进行测试？

由于我们在e2e测试中使用本地服务器中提供的模拟文件，$http.get(...)部分将运行得非常快，当我尝试检查“加载”div时，它总是被隐藏，因为数据已经加载

有没有办法测试呢？

Answer 1

在我的申请中，我决定实施以下方案：

• 后端，在开发模式下运行时，添加了一个额外的中间件，它正在查看cookie头的值
• 如果存在名为__km_delay的cookie标头，则它包含一个延迟设置为ms的数字。在将控制权交给下一个中间件之前，此中间件将睡眠一段时间

同时，我使用以下与量角器：

browser.manage().addCookie('__km_delay', millis, '/')

当我完成测试时，我会调用：

browser.manage().deleteCookie('__km_delay')

这样做的好处是无需以任何方式修改Angular app逻辑进行测试。

如果您想知道为什么我选择cookie而不是另一个HTTP标头，那是因为我发现无法使用Protractor设置额外的标头。并且cookie无论如何都是标题;）

顺便说一句，我使用类似的东西来测试5xx服务器响应。