失败：脚本超时：11 秒内未收到结果来自：任务：Protractor.waitForAngular() - 定位器：By(css 选择器，#my-btn)

Question

我正在尝试使用Protractor 为我的Angular 应用程序编写一些e2e 测试。

我有一个简单的 html 按钮，上面有 id=my-btn，我想点击它，使用：

$('#my-btn').click();

很遗憾，我收到以下错误：

失败：脚本超时：11 秒内未收到结果

来自：任务：Protractor.waitForAngular() - 定位器：By(css selector, #my-btn)

(Session info: chrome=73.0.3683.75)
(Driver info: chromedriver=2.46.628411 (3324f4c8be9ff2f70a05a30ebc72ffb013e1a71e),platform=Mac OS X 10.14.3 x86_64)

如果在点击之前我设置：

browser.waitForAngularEnabled(false);

那么我没有收到任何错误。问题是这样做意味着：

 * If set to false, Protractor will not wait for Angular $http and $timeout
 * tasks to complete before interacting with the browser. This can cause
 * flaky tests, but should be used if, for instance, your app continuously
 * polls an API with $timeout.

所以我想知道是什么导致waitForAngular 操作超时。

有没有办法检查 http 或 timeout 仍然挂起？

我想调试我的应用程序以了解发生了什么。

Answer 1

正如错误消息所暗示的，一个简单的解决方案是将 waitForAngularEnabled(false) 与硬编码的睡眠结合使用，无论您希望在不通过测试的情况下加载页面多长时间（例如 3 秒）。 只有当页面在 3 秒后没有真正完成加载进入静态状态时，测试才会变得不稳定：

await browser.sleep(3000)

然后在 waitForAngularEnabled 为 false 时运行您的期望

browser.waitForAngularEnabled(false)
// expectations here
browser.waitForAngularEnabled(true)

当您可以使用优雅的回调来确认 Angular 已完成并且您的元素已加载时，这不是首选的解决方案。如果页面加载速度超过 3 秒，那么您的测试就是在浪费时间……但是，它简单、易读且可靠。它允许您强制限制页面加载时间，同时还能够在一个环境中检查元素，而不会因 Protractor 的行为的不可预测性而影响页面上的角回调。在前端自动化方面，可靠性比性能更重要。

Answer 2

我遇到了一些麻烦。您可以尝试一些方法。

1. 手动检查是否有任何定时操作。例如，我的应用程序有一个timer，它每 5 分钟进行一次健康检查。但是这个timer 操作一直在堆栈上意味着Angular 永远不会稳定下来。

如果你确实发现了这样的操作，你可以使用ngZone.runOutsideAngular() 来防止它破坏你的测试。

constructor(
    private ngZone: NgZone
  ) {}

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    this.appStatusInterval = interval(this.appStatusUpdateIntervalTime)
       // rest of your code here
    });
  });
}

1. 打开开发工具并运行getAllAngularTestabilities()。尝试从那里获得什么信息。您可以尝试从the source code 获取额外数据。这一点可能对您特别有用：

isStable(): boolean {
    return this._isZoneStable && this._pendingCount === 0 && !this._ngZone.hasPendingMacrotasks;
}

通过依次检查这三个条件中的每一个，您至少可以进一步了解是什么破坏了 Angular 的稳定性。