angular - Protractor :如何等待 findElements？

Question

我有一个搜索字段，当用户点击输入时，它有一个带有一堆复选框的表格。我需要等待结果加载，然后单击表格第一行的复选框。

这分为 2 个测试用例，第一个执行搜索，第二个单击结果第一行中的复选框执行其他操作。

 // Test #2      
 it('should perform the Search', () => {
    po.searchAutocomplete.sendKeys('\n');
  });

 // Test #3
  it('3  : should Activate and Inactivate a Program', () => {
    const r = browser.driver.findElements(by.tagName('p-checkbox'));

    browser.driver.wait(EC.presenceOf(r[0]));

    r[0].click();

    browser.sleep(2000).then(() => {
    });

    r[0].click();  
  });

  // Test #4
  it('4  : should navigate to Create New', () => {
    po.createNewButton.click();
  });

因此，此处存在同步问题 - 我的测试 #2 成功运行，但随后测试 #3 立即开始运行。如果搜索结果太慢，那么我会得到一个复选框不存在的错误，如果它及时返回就可以了。此外，有时第二次 click() 会导致对象未附加到当前页面，因为测试 #4 中的“新建”导航到另一个页面。

看起来 r[0].clicks 的 promise 在页面导航到另一个带有 po.createNewButton.click() 的 View 后返回，导致对象未附加到当前页面错误。

我需要所有这些同步操作。我输入了 browser.wait 但这不起作用，它只是被忽略了。

我该如何解决这个问题？

编辑 - 感谢以下建议。这是我所做的更改并使其正常工作:)

在我的应用程序中，我的标题中有一个使用 Observable.interval 的时钟计时器，此外，我还有一个计时器正在对服务器执行 ping 操作，以固定的时间间隔获取一些数据。由于它们始终在运行并且永远不会完成，因此使用 element.all 语法在 Protractor 中导致各种超时，这就是我切换到 browser.driver.findElement 语法的原因，但由于它的异步性质(如海报所示)下面 - 谢谢!)使得编码变得困难。

我用以下代码包装了计时器:

this.ngZone.runOutsideAngular(() => {   // Required to prevent interference with Protractor
  this.updateTimer = Observable.interval(UPDATE_INTERVAL).publish();
  this.updateTimer.subscribe(v => {
    this.doSomething();
  });
});

现在，我可以使用 element.all 而不会超时!

Answer 1

发生这种情况是因为您正在使用驱动程序命令 来获取元素。驱动程序命令不会等待 Angular 异步任务完成。例如，HTTP 请求，您的情况下的数据加载。 (默认情况下 Protractor 将等待 Angular 异步任务完成，然后再继续队列中的下一个 promise )。

只有当您的应用程序中始终有一些异步事件时，使用 driver 命令才有意义。例如计时器。

代替

browser.driver.findElements(by.tagName('p-checkbox'));

使用:

element.all(by.tagName('p-checkbox'));

现在，每当您使用 browser.wait() 时，您都必须等待条件为真，并在等待结束时放置其余代码:

browser.wait(EC.presenceOf(r[0])).then(() => {
   ...// wait is over. Rest of my code here.
})

建议:请让测试its和fits相互独立。如果第一个 it 失败怎么办？那么后续的它也会失败吗？

EDIT: Reasons for tests getting timed out

在您的评论中，您说您禁用了计时器？您确定没有其他计时器在运行吗？ Protractor 可能会在两种情况下显示此类消息:

1. 您的应用中有一个计时器在运行， Protractor 等待它完成但超时。
2. 您已使用浏览器等待添加等待以检查 presenseOf 和元素或 isElement Clickable 等，但该元素从未出现在您添加等待的页面上。

如果有一个计时器在运行:(没有正确阅读您的评论。如果上面列表中的点号 2 对您来说是错误的，下面是一个解决方案。)

如果您超时，那么肯定有一些计时器在您的应用程序的后台运行。我们通常出于各种原因在我们的应用程序中使用它，一个常见的原因是在应用程序中某个特定的不活动时间间隔后从应用程序中注销用户。

既然您已经超时，那么您有两个选择。

1. 使用驱动命令。

2. 禁用 Angular 等待，然后使用 Protractor 命令。

   browser.waitForAngularEnabled(false/true).then(() => {.. 其余
具有特定检查元素存在性的代码，它们的
可点击性等，然后执行实际操作。
})

两者都同样麻烦，因为现在您必须等待所有事情。您不能使用 Protractor 默认等待 Angular 来完成页面加载、HTTP 请求等，因为如果您使用它，那么您将永远等待直到超时。

我在这种情况下所做的是:

向应用程序添加一种方法，以便为特定测试用户禁用运行计时器。我们使用特定的测试用户进行 Protractor 测试用例，当该用户登录时，该用户可以选择禁用计时器。 (一个额外的 dom 元素，单击它会删除计时器)。因此，就在用户即将点击登录按钮时，我禁用了 angular wait，(我的应用程序中的计时器仅在登录后启动)然后我在应用程序中进行特定的等待，直到我看到额外的DOM 元素存在且可单击，如果为真，则我单击它。单击后，我重新启用 Angular 等待。在此之后，我可以利用 Protractor 自动等待元素出现。希望这会有所帮助。