Question

我正在尝试使用Protractor和Cucumber为我的Web应用程序创建一个包含E2E测试的存储库。我已经开始使用此存储库：https://github.com/spektrakel-blog/angular-protractor-cucumber

当我强制Protractor将应用程序视为常规网页时，测试运行正常。测试运行器正在与应用程序交互并期待一些结果。问题是，我想让Protractor检测Angular，以便在检查区域之前等待区域稳定然后＆＃39;然后＆＃39;断言。

这是我的protractor.conf.js：

exports.config = {
  allScriptsTimeout: 30000,
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--no-sandbox']
    }
  },
  directConnect: true,
  baseUrl: 'http://<ci-server-address>/',

  specs: [
    './e2e/features/*.feature'
  ],

  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),

  cucumberOpts: {
    require: ['./e2e/steps/**/*.ts'],
    strict: true,
    format: [
      'json:reports/summary.json'
    ],
    dryRun: false,
    compiler: []
  },

  onPrepare() {
    browser.ignoreSynchronization = true;
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  }
};

简而言之 - 测试使用以下配置运行，但当我删除browser.ignoreSynchronization = true;时，我收到以下错误：Timed out waiting for asynchronous Angular tasks to finish after 30 seconds. This may be because the current page is not an Angular application.。

到目前为止我尝试过的事情（没有改进）：

将ng-app添加到<body>代码
正在检查window.getAllAngularRootElements() - 正确返回app-root
检查window.getAllAngularTestabilities() - 返回Testability对象
在Chrome上启动测试（有或没有沙箱）
在Firefox上启动测试
尝试部署我们的应用程序的CI服务器和ng serve

我使用的是最新版本的Protractor，Cucumber，Chai和TypeScript。任何帮助将非常感激。非常感谢你提前！

Answer 1

这听起来像是我潜在的区域问题。角度取决于ZoneJS（ngZone）。使用setTimeout()，setInterval()等异步javaScript函数时，遇到此错误并不罕见。

原因是ZoneJS猴子修补了这些功能，并且在Angular区域的上下文之外进行了修补。此时，当量角器尝试连接到您的应用程序时，它不再在Angular Zone中运行，因此量角器将挂起，并最终因您得到的错误而超时。

如果您是我，请查看您的应用程序，了解ZoneJS猴子修补的所有异步功能。同样，通常，请在代码中查找在应用程序区域的上下文之外运行的所有内容。

这是一篇有关ZoneJS的好文章，不仅可以帮助您了解ZoneJS，而且还列出了猴子补丁Understanding ZoneJS

的功能。

Answer 2

验证您的应用确实稳定：

  constructor(zone:NgZone)
  {
    zone.onStable.subscribe(()=> window.console.info('onStable'));
    zone.onUnstable.subscribe(()=> window.console.info('onUnstable'));
    zone.onMicrotaskEmpty.subscribe(()=> window.console.info('onMicrotaskEmpty'));
  }

Answer 3

尝试以下选项

// CSS Selector for the element housing the angular app - this defaults to
// body, but is necessary if ng-app is on a descendant of <body>.
rootElement: 'body',

// The timeout in milliseconds for each script run on the browser. This should
// be longer than the maximum time your application needs to stabilize between
// tasks.
allScriptsTimeout: 3600 * 1000,

// How long to wait for a page to load.
getPageTimeout: 3600 * 1000,

如果您的角度页面需要更多时间来加载页面，请尝试使用以下代码禁用动画

    var disableNgAnimate = function () {
        angular.module('disableNgAnimate', []).run(['$animate', function ($animate) {
            $animate.enabled(false);
        }]);
    };
    browser.addMockModule('disableNgAnimate', disableNgAnimate);

希望以上解决方案对您有所帮助。 browser.ignoreSynchronization = true;已过时，请尝试使用browser.waitForAngularEnabled(true);，请参考here以获取更多输入

Answer 4

量角器/全局变量已从v4.0.9中删除，现在我们可以直接从量角器名称空间直接导入量角器帮助器，

示例：

import {browser} from 'protractor';

Answer 5

尝试在量角器conf.js中删除baseUrl: 'http://<ci-server-address>/',

量角器无法在已部署的应用程序上检测到Angular 5

5 个答案: