Then not executing after browser.wait - protractor

Question

I am trying to use Protractor for our application. Unfortunately, the initial login page is non-Angular so I'm having to handle all the implicit waits with ExpectedConditions. In the below code snippet, the click() is never executed. Instead, the test times out waiting for the next page to show. In the console output (also pasted below) I see the the link was found, but I don't see the subsequent click action.
var signUpLink = element(by.id('sign-up-link'));
var isLinkClickable = EC.elementToBeClickable(signUpLink);
browser.wait(isLinkClickable, 5000).then(function() {
signUpLink.click();
});
var isWidgetVisible = EC.visibilityOf(element(by.id('email')));
browser.wait(isWidgetVisible, 5000, 'Sign Up Page is too slow');
Here's a snippet of the console output:
12:54:17.404 INFO - Executing: [find elements: By.id: sign-up-link])
12:54:18.002 INFO - Done: [find elements: By.id: sign-up-link]
12:54:18.006 INFO - Executing: [is enabled: 0 [[ChromeDriver: chrome on MAC ()] -> id: sign-up-link]])
12:54:18.141 INFO - Done: [is enabled: 0 [[ChromeDriver: chrome on MAC ()] -> id: sign-up-link]]
12:54:18.147 INFO - Executing: [find elements: By.id: sign-up-link])
12:54:18.755 INFO - Done: [find elements: By.id: sign-up-link]
12:54:18.760 INFO - Executing: [is displayed: 0 [[ChromeDriver: chrome on MAC ()] -> id: sign-up-link]])
12:54:18.770 INFO - Done: [is displayed: 0 [[ChromeDriver: chrome on MAC ()] -> id: sign-up-link]]
12:54:18.774 INFO - Executing: [find elements: By.id: sign-up-link])
12:54:18.780 INFO - Done: [find elements: By.id: sign-up-link]
12:54:18.787 INFO - Executing: [is enabled: 0 [[ChromeDriver: chrome on MAC ()] -> id: sign-up-link]])
12:54:18.791 INFO - Done: [is enabled: 0 [[ChromeDriver: chrome on MAC ()] -> id: sign-up-link]]
12:54:18.805 INFO - Executing: [find elements: By.id: email])
12:54:18.815 INFO - Done: [find elements: By.id: email]
Edit - 5/10
I got it to work by adding an explicit wait (gasp!). I don't get why this works. Why does it take so long for the link to get clicked?
var signUpLink = element(by.id('sign-up-link'));
var isLinkClickable = EC.elementToBeClickable(signUpLink);
browser.wait(isLinkClickable, 5000);
browser.driver.sleep(3000); // I give up
signUpLink.click();

Answer 1

My best guess based on what you've shared is that the link becomes clickable while elements above it in the DOM are still rendering. The end result is that the wait condition is satisfied, a click event is scheduled, but before the click can occur new elements are rendered that shift the link elsewhere so that the click doesn't actually hit the link. It sounds far-fetched I know, but I saw something similar happen with webdriver-jvm on a project I was working on. On my project I was lucky enough to have jQuery loaded in the page, so I fixed my problem by executing a $(window).load(); using a JavascriptExecutor before trying to click the button, which ensured that the page was entirely loaded before webdriver continued it's execution. You could try doing something similar if you happen to have jQuery loaded up:
browser.driver.executeScript('$(window).load();').then(function() {
var signUpLink = element(by.id('sign-up-link'));
var isLinkClickable = EC.elementToBeClickable(signUpLink);
browser.wait(isLinkClickable, 5000).then(function() {
signUpLink.click();
});
var isWidgetVisible = EC.visibilityOf(element(by.id('email')));
browser.wait(isWidgetVisible, 5000, 'Sign Up Page is too slow');
});