Protractor, AngularJS, Parse -- Protractor 不等待 Angular 解析答案

【问题标题】：Protractor, AngularJS, Parse -- Protractor does not wait for Angular to resolveProtractor, AngularJS, Parse -- Protractor 不等待 Angular 解析
【发布时间】：2015-01-28 22:10:16
【问题描述】：

我是 Protractor 和 AngularJS 的新手。我在后端使用 Parse。尝试做一个非常简单的测试：

describe('Test', function () {

beforeEach(function () {
  browser.get('index.html#/example')
});

it('should have a button', function () {

   expect(element(by.css('#test321')).isElementPresent()).toBe(true); //fails 

}); ...

测试失败。该元素在 template.html 中：

 ...
<body>
    <button id="test321">stuff</button>
...

它是通过角度路由加载的。该路由还从后端加载数据：

...
config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/example', {
                templateUrl: 'template.html',
                controller: 'templateCtrl',
                resolve: {
                    data: 'dataService' //Data is loaded from Parse. This line causes the problem
                }...

问题是由上面的“data:”行引起的。如果我把那条线拿出来，或者让它返回静态结果，它就可以正常工作。此外，如果我移动这个元素 index.html 它也可以工作。

这似乎是一个时间问题。然而，根据文档量角器（或特别是 isElementPresent）在定位元素之前等待所有分辨率。

我被踩了。非常感谢您的帮助。

更新：根据this，这已在 Protractor 1.2 中解决，但我使用的是 1.4。很奇怪。

【问题讨论】：

到目前为止，我发现的唯一临时解决方案（受 aricearice 启发）是插入显式等待。这是一种似乎可行的方法：browser.wait(function () { return $('#addReferringButton').then(function (element) { return true; }, function(error) { return false; }); }, 5000);

标签： angularjs protractor angular-routing

【解决方案1】：

在 Angular 2 中，我在 protractor.conf.js 文件中使用以下内容：

onPrepare: function() {
    browser.ignoreSynchronization = false;
},
useAllAngular2AppRoots: true

【讨论】：

【解决方案2】：

由于这是一个时间问题，解决方法是等待元素出现，然后再断言它存在：

describe('Test', function () {

beforeEach(function () {
  browser.get('index.html#/example')
});

it('should have a button', function () {
   browser.wait(function() {
       return $('#test321').isPresent(); // keeps waiting until this statement resolves to true
   }, timeToWaitInMilliseconds, 'message to log to console if element is not present after that time');
   expect($('#test321').isPresent()).toBe(true);  

}); ...

【讨论】：

非常感谢，这确实有效。然而，奇怪的是，它需要如此多的支持，而不是像他们在文档中所说的那样等待 Angular “安定下来”。这可能与我没有使用 $http 获取数据（我使用 Parse JS SDK）这一事实有关——这是我唯一能想到的。我开始使用 Parse 模拟，但在此期间我将使用您的解决方案。
经过进一步检查，这似乎无法始终如一地工作。 $('#test321').isPresent() 返回一个promise而不是一个布尔值，所以它马上就失败了。以某种方式调用有时会奏效（可能是通过引入延迟），但并非始终如一。
这里有一个修复：browser.wait(function () { return $('#addReferringButton').then(function (element) { return true; }, function(error) { return false; }); }, 5000);
这很有帮助，我可以得到第一个解决方案，但不是使用承诺的最后一个版本。测试/期望是否打算进入“then”函数的主体？我假设他们将替换'return true' 例如： browser.wait(function () { return $('#addReferringButton').then(function (element) { expect(element).isPresent(); }, function(错误）{返回假；}）；}，5000）；
browser.wait 等待传入的函数返回值true，因此传入的函数应该返回一个布尔值，例如：element.isPresent() 或element.isDisplayed() 或5 === 5。 expect(element).isPresent(); 返回一个对象，而不是布尔值。

【解决方案3】：

isPresent() will return promises,so put your expect code inside the callback function and try to execute. 

Try below code.hope it will work,

it('should have a button', function () {

   $('#test321').isPresent().then(function(result){
                                expect(result).toBe(true);
                                 });
 });

【讨论】：

Suresh，虽然您的建议完全合乎逻辑，但出于奇怪的原因，这对我不起作用。据我所知，量角器并没有等待。正如我所提到的，这可能与我没有使用 $http 获取数据（我使用 Parse JS SDK）这一事实有关——这是我唯一能想到的。