Clash Royale CLAN TAG#URR8PPP

ProtractorJS Timeout on clicking element, any suggestions?

The Problem

I have a simple 'New Booking' button I wish to click. As shown below

<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>


Something to Note

This is a Material 2 Angular 5 Application, so every page uses and functions off of Angular.

In the past, the code I will provide further down had worked 100% every single time I ran the test without fail, which leads me to believe something else in the source code may be what causing this issue. However no additional load/spinners or popups are in the way

It has absolutely no unique attributes whatsoever, no surrounding
divs with IDs to attach to or any other way of grabbing the element.
However using my knowledge of XPath, despite the problem I managed
to find a unique locator which I believe works, as shown below.

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


I know for a fact this should grab the element, because when I query the xpath through the ChromeDevTools it highlights the element.

The Code that originally worked

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


The Exception produced from the ProtractorJS Console

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'])


What i've tried so far?

I've tried using Protractors built in Expected Conditions from the API Library they have provided this includes all of these:

1) Waiting Until the Presence of the element

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


2) Waiting Until the Visibility of the element

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


3) Waiting until the clickability of the element

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


I've also tried using Angular's own waits such as:

browser.WaitForAngular();


and also

browser.WaitForAngularEnabled();


2 Answers
2

The click() method returns a promise, if you need some documentation on that you can surely read the following: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

The Protractor/WebDriverJS "Control Flow" takes care of settling these promises. However, my team has been struggling with the synchronization not being perfect.

A solution to this issue is the actually use EC to await for the element and then settle the promise of the click by chaining

.then()


Check out this stack overflow answer: Protractor, when should I use then() after a click()

Even better?

We use the new async functions to await promises in our protractor tests. This has enabled us to refactor much of the logic and ensure a proper controlled flow. This link describes well in the Fork in the road section why a "serial" code (executes one step at a time) is the outcome of using async/await: https://ponyfoo.com/articles/understanding-javascript-async-await

expect(await btnNewBooking.isPresent()).toBe(true); ...

You should try disabling Protractor to wait for being synchronous with Angular. This can be done by browser.ignoreSynchronisation. Set it to truein your conf.js file.

browser.ignoreSynchronisation

true

conf.js

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.