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

Question

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

当我强制 Protractor 将应用程序视为常规网页时，测试运行正常。测试运行ner 正在与应用程序交互并期待一些结果。问题是，我想让量角器检测 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() - returns app-root 是否正确
正在检查 window.getAllAngularTestabilities() - returns 一个 Testability 对象
在 Chrome 上启动测试（有或没有沙盒）
在 Firefox 上启动测试
尝试使用部署了我们应用程序的 CI 服务器和使用 ng serve

我正在使用最新版本的 Protractor、Cucumber、Chai 和 TypeScript。任何帮助将非常感激。非常感谢您！

Answer 1

尝试在量角器 conf.js

中删除 baseUrl: 'http://<ci-server-address>/',

Answer 2

这对我来说听起来像是一个潜在的 Zone 问题。 Angular 取决于 ZoneJS (ngZone)。在使用任何异步 javaScript 函数（例如 setTimeout()、setInterval() 等...

时，运行出现此错误并不少见

原因是 ZoneJS monkey 修补了这些功能，并且它在 Angular 区域的上下文之外这样做。此时当 Protractor 尝试连接到您的应用程序时，它不再运行ning 在 Angular 区域中，因此 Protractor 将 hang 并最终超时你得到的错误。

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

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

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,

如果您的 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 以获得更多输入

Answer 4

验证您的应用是否真正稳定：

  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 5

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

示例：

import {browser} from 'protractor';

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

Protractor can't detect Angular 5 on deployed application

cucumber

protractor

e2e-testing

angular

angular-e2e