量角器：如何等待引导的 AngularJS 满载答案

【问题标题】：Protractor: how to wait for full load of bootstrapped AngularJS量角器：如何等待引导的 AngularJS 满载
【发布时间】：2014-12-06 05:59:29
【问题描述】：

我有一个引导的 Angular (1.2.6) 应用程序。这意味着它没有明确的ng-app。因此，我在让 Protractor 框架的测试正常工作（使用 SauceLabs 和 grunt-protractor-runner）时遇到了各种问题。

错误因我的尝试而异，但通常：

 Error: Angular could not be found on the page http://xxx:9000/ :
 angular never provided resumeBootstrap

或者……

Error: Error while waiting for Protractor to sync with the page: {}

我找到了一些我尝试过的建议解决方案。包括在this rich thread 和here 中找到的那些。但是，我所做的任何事情都无法正常工作。

我尝试像这样在引导程序中使用angular.resumeBootstrap（请注意，我尝试了多种变体均无济于事，包括尝试以编程方式在文档正文上设置 ng-app）：

angular.element( document ).ready( function() {
  window.name = 'NG_DEFER_BOOTSTRAP!'
  angular.bootstrap( document, [ 'app' ] );
  setTimeout( angular.resumeBootstrap, 0 );
});

正如其他人发现的那样，这个错误很奇怪：

UnknownError: unknown error: [ng:btstrpd] App Already Bootstrapped with this Element
'<body ng-app="" ng-controller="ApplicationController" class=" ng-scope pace-done">'

奇怪/烦人的是，至少在 Sauce Labs 会话中，这个测试似乎正在运行......它只是奇怪地认为它被引导了两次。

我还尝试在测试本身中使用waitForAngular、wait 和其他人的各种组合。这是我尝试过的一种变体：

it( 'should load the home page', function() {
  ptor = protractor.getInstance();
  ptor.waitForAngular();
  ptor.driver.get( 'http://xxx:9000/' );
  ptor.driver.wait( function() {
    return ptor.getCurrentUrl().then( function() {
      return ptor.isElementPresent( by.id( 'signIn' ) ).then( function() {
        console.log('we are here!');
        return true;
      });
    });
  })
  .then( function() {
    expect( ptor.isElementPresent( by.id( 'signIn' ) ) ).toBe( true );
  });
});

这会导致如下错误：

1) e2e: home should load the home page
  Message: timeout: timed out after 20000 msec waiting for spec to complete
  Stacktrace: undefined

我也尝试在配置文件中增加各种超时，但无济于事。

任何帮助将不胜感激！

【问题讨论】：

@alecxe grunt-protractor-runner@1.1.4 和 protractor@1.4.0。我正在运行两者的早期版本，升级（认为这会有所帮助）......并且没有（明显的）错误差异。
我不确定这是否会有所帮助，但请尝试将量角器降级到早期版本。
@alecxe 是的，以前尝试使用 protractor@0.24.2 (!) 并得到相同的结果。

标签： javascript angularjs protractor

【解决方案1】：

您应该将测试分成两个“it”步骤。像这样：

it( 'should load angular', function() {
  ptor = protractor.getInstance();
  ptor.waitForAngular();
})

it( 'should load the home page', function() {
  ptor.driver.get( 'http://xxx:9000/' );
  ptor.driver.wait( function() {
    return ptor.getCurrentUrl().then( function() {
      return ptor.isElementPresent( by.id( 'signIn' ) ).then( function()     {
        console.log('we are here!');
        return true;
      });
    });
  })
  .then( function() {
    expect( ptor.isElementPresent( by.id( 'signIn' ) ) ).toBe( true );
  });
});

protractor 的问题在于，每个命令都无需等待上一步完成即可运行。所以，ptor.waitForAngular() 和ptor.driver.get( 'http://xxx:9000/' ) 几乎同时运行。如果你把它们分成两个步骤，量角器会在第一个“it”步骤完成后继续前进。

【讨论】：

我忘了提到 protrator.getInstance() 已被弃用。改用浏览器github.com/angular/protractor/blob/master/…
这适用于我使用 require.js 手动引导的应用程序。我只用 browser.waitForAngular() 放置了一个前驱“it”块，并在我的量角器 conf 文件中设置 browser.ignoreSynchronization = true。它看起来很hacky，但它正在工作。唷。
更正，这只对我某些时候有效。非常令人沮丧，我仍然会在完全相同的测试中遇到间歇性错误。
这是因为 "browser.ignoreSynchronization = true" 会导致量角器忽略 Angular 的 $timeout 和 $http 调用，这会导致测试结果不稳定。小心使用“ignoreSynchronization”。
it 测试中的块应该彼此独立，因为它们运行的顺序无法保证。因此，这种方法有时可能有效，有时无效。