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

【问题标题】：Protractor can't detect Angular 5 on deployed application量角器无法在已部署的应用程序上检测到 Angular 5
【发布时间】：2018-10-24 23:08:00
【问题描述】：

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

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

这是我的 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。任何帮助将非常感激。非常感谢您！

【问题讨论】：

您有工作解决方案并询问为什么其他一些事情没有工作，这很奇怪。为什么你不能只使用工作之一？您希望获得哪些优势？
我在哪里写到我有一个可行的解决方案？
When I am forcing Protractor to treat the application as a regular webpage, the tests run fine. 这个。我只是想了解您是否尝试解决问题（当然，这是问题所在），但您可能会选择另一种方式。
当 Protractor 无法检测到 Angular 时，它无法等待解析区域。在这种情况下，我需要在我的 E2E 测试中设置超时以使它们通过。这是不可接受的，更不用说我正在使用 Protractor 因为 Angular 集成。 ;)
为什么你不能等explicit服务员的zonez？

标签： angular protractor cucumber e2e-testing angular-e2e

【解决方案1】：

protractor/globals 已从 v4.0.9 中删除，现在我们可以直接从 protractor 命名空间中简单地导入 protractor 助手，这更加简洁。

例子：

import {browser} from 'protractor';

【讨论】：

【解决方案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'));
  }

【讨论】：

谢谢，通过使用您的代码，我很快就能够验证我在应用程序中使用区域时确实存在问题。 :)

【解决方案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,

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

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

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

【讨论】：

ignoreSynchronization 已弃用但仍然有效。最好使用waitForAngularEnabled 并将其设置为false。见github.com/angular/protractor/blob/…
感谢您的意见。不幸的是，我已经尝试过增加超时，但没有得到积极的结果。此外，我们不使用 Angular 动画模块。顺便说一句，您的代码似乎是用 AngularJS 编写的，而我使用的是 Angular（准确地说是 5.2）。

【解决方案4】：

对我来说，这听起来像是一个潜在的区域问题。角度取决于ZoneJS (ngZone)。在使用任何异步 JavaScript 函数（例如 setTimeout()、setInterval() 等）时遇到此错误并不少见……

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

如果我是你，我会看看你的应用程序是否有 ZoneJS 猴子修补的任何异步函数。此外，一般来说，在您的代码中查找在您的应用程序区域上下文之外运行的任何内容。

这是一篇关于ZoneJS的好文章，不仅可以帮助你理解ZoneJS，还列出了猴子补丁Understanding ZoneJS的函数

【讨论】：

一旦你忽略同步，你就不应该有区域问题，因为浏览器不应该等待 Angular 稳定。因此，如果您删除 ignoreSynchronization 并且您使用的是 Angular 应用程序，则可能是区域问题。我喜欢这个答案，并且可能会对此下注。
这为我们解决了！我一直在试图弄清楚我们的 Protractor 自动化发生了什么，并且永远不会想到这一点。谢谢！
这首歌看起来不错！非常感谢，我周末去看看。
最后，我们发现我们在应用程序的某个地方有setInverval，应该在 Angular 区域之外运行。非常感谢，您的建议很有帮助！

【解决方案5】：

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

【讨论】：

这似乎不是问题 - 浏览器打开正确的页面，只是挂起并且什么也不做。尽管如此，我已经尝试过并得到了相同的结果。仅供参考protractor --baseUrl http://url-to-my-ci-server.
http://url-to-my-ci-server打开的页面是不是Angular页面？
您是否尝试过将browser.get('http://url-to-my-ci-server') 移动到测试用例中并将其从baseUrl conf.js 中删除，并且不要在cmd 行中指定它。如果仍然不能解决问题，请尝试最新的量角器
当我这样做时，结果相同，只是错误消息有点不同：Could not find Angular on page http://server-name/login : angular never provided resumeBootstrap。我已经在使用最新版本的 Protractor - 5.3.1。
如何准备一个新的规范来测试另一个 Angular 应用程序，比如 Angular 官方网站：angular.io，看看问题是否来自您的代码和依赖项。