量角器JS单击元素超时，有什么建议吗?

Question

问题

我想点击一个简单的"新预订"按钮。如下图所示

<button _ngcontent-c9="" class="mat-menu-item" mat-menu-item="" role="menuitem" routerlinkactive="menu-highlight-item-left" tabindex="0" ng-reflect-router-link="/booking,create" ng-reflect-router-link-active="menu-highlight-item-left" aria-disabled="false">
    New Booking
<div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]">
</div>
</button>

需要注意的事项

这是一个Material 2 Angular 5应用程序，因此每个页面都使用Angular并运行。

过去，我将进一步提供的代码每次运行测试时都 100% 工作，这让我相信源代码中的其他内容可能是导致此问题的原因。但是，没有额外的加载/微调器或弹出窗口

妨碍

它绝对没有任何独特的属性，没有周围环境div 带有要附加到的 ID 或任何其他抓取元素的方式。 然而，利用我对XPath的了解，尽管我管理了问题 找到一个我认为有效的独特定位器，如下所示。

var btnNewBooking = element(by.xpath("//*[text()='New Booking']"));

我知道这应该抓住元素，因为当我通过ChromeDevTools查询xpath时，它会突出显示该元素。

最初有效的代码

var btnNewBooking = element(by.xpath("//*[text()='New Booking']"));
btnNewBooking.click();

从量角器JS控制台生成的异常

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
    While waiting for element with locator - Locator: By(xpath, //*[text()='New Booking'])

到目前为止我尝试了什么？

我尝试使用他们提供的 API 库中的预期条件中内置的量角器，其中包括所有这些：

1(等到元素存在

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
browser.wait(EC.presenceOf($('#abc')), 5000);

2(等到元素的可见性

EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be visible on the dom.
browser.wait(EC.visibilityOf($('#abc')), 5000);

3(等到元素的可点击性

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be clickable.
browser.wait(EC.elementToBeClickable($('#abc')), 5000);

我也尝试使用Angular自己的等待，例如：

browser.WaitForAngular();

还有

browser.WaitForAngularEnabled();

Answer 1

click(( 方法返回一个承诺，如果您需要一些文档，您肯定可以阅读以下内容： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

量角器/WebDriverJS"控制流">负责解决这些承诺。但是，我的团队一直在努力解决同步不完美的问题。

此问题的解决方案是实际使用 EC 等待元素，然后通过链接解决点击的承诺

.then()

看看这个堆栈溢出答案：量角器，我什么时候应该在点击((后使用 then((

甚至更好？

我们使用新的异步函数来等待量角器测试中的承诺。这使我们能够重构大部分逻辑并确保适当的受控流。此链接在 Fork in the road 部分中很好地描述了为什么"串行"代码(一次执行一个步骤(是使用 async/await 的结果： https://ponyfoo.com/articles/understanding-javascript-async-await

Answer 2

您应该尝试禁用量角器以等待与 Angular 同步。这可以通过 browser.ignoreSynchronisation .将其设置为conf.js文件中的true。