使用量角器进行ng-upgrade

时间:2017-05-16 15:58:10

标签: angularjs angular protractor ng-upgrade

我正在努力将我的AngularJS(1.6)应用程序迁移到Angular(4),现在有一个混合应用程序,用NgUpgrade引导。

然而,这似乎完全破坏了我的量角器测试。

  

失败:等待异步Angular任务在11秒后完成超时。这可能是因为当前页面不是Angular应用程序。有关详细信息,请参阅常见问题解答:https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

     

在使用locator等待元素时 - Locator:By(css selector,.toggle-summary-button)

混合应用更改

应用程序似乎运行正常,AngularJS和Angular组件都按预期工作。我在引导过程中所做的更改是:

1从html标记中删除ng-app

<html lang="en" *ng-app="myapp">

2添加了AppModules(@NgModule)等。

3使用NgUpgrade引导应用程序:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['myapp'], {strictDi: true});
});

量角器测试

基于上面的错误,问题似乎与Protractor在等待Angular时所做的事情有关。我有一个beforeEach块加载登录页面,填写详细信息并登录。奇怪的是它仍然打开页面并在用户名字段中输入文本,但随后它无法继续下去。

我无法理解为什么这有任何不同,并且没有多少变化的东西似乎有帮助,所以任何指导都是最受欢迎的!

我试过了,没有成功:

  • 添加&#34; rootElement:&#39; body&#39;&#34;到我的量角器配置文件
  • 添加&#34; ng12Hybrid:true&#34;到我的量角器配置文件 - 我收到一条消息,说它不再需要,因为它会自动检测到。
  • allScriptsTimeout设置从11000增加到60000并且仍然超时。
  • 关闭waitForAngularEnabled设置。这解决了登录字段的问题,但是我的http模拟没有工作,测试失败。

2 个答案:

答案 0 :(得分:5)

有趣的是我在15个月前问过完全相同的问题(+ github)关于角度1到角度2:

Protractor + Hybrid Angular 1+2 Application = Fail

没有任何解决方案我回到了角度1.今天我们决定再次尝试从你的角度1上升到4,并且因为我们仍有完全相同的问题而落在你的问题上......

嗯,实际上并不那么有趣......我无法理解为什么这么重要的特征会被这样分开。由于Angular 2+的突破性变化,AngularJs应该被积极维护!这有点令人失望(对于那些期待真正答案的人,对不起,如果有更新,我会发布)......

答案 1 :(得分:0)

我想出了一个临时方法来解决此问题,方法是使用以下逻辑覆盖waitForAngular函数。

onPrepare: function() {
            
            var script = "var callback = arguments[arguments.length - 1];" +
                "angular.element(document.querySelector(\"body\")).injector()"+
                ".get(\"$browser\").notifyWhenNoOutstandingRequests(callback)");

            browser.waitForAngular = function() {
                return browser.executeAsyncScript(script)
            };
}