Protractor - wait X seconds while page loading, if still not loaded - click button again

Question

My problem is that I have non-angular login page but sometimes when clicks Login button it stops on loading (login page still visible).

What I want is that after click Login button I give it ex. 5 sec to finish load, if not - I want to click Login button again.

Whats the best way to do that? My current part of code looks like:

browser.waitForAngularEnabled(false);
await browser.driver.wait(EC.visibilityOf(this.getLoginForm()), 10000);
await this.usernameInput.sendKeys(username);
await this.passwordInput.sendKeys(password);
await this.clickLogInButton();
//here I want condition with timeout for page loading with repeat clickLogInButton if necessary
browser.waitForAngularEnabled(true);

Answer 1

the most optimal way in my opinion would be try/catch even though I rarely suggest to use it

// since you may wait for home page twice, you want to make it a function to avoid duplicate code
let waitForHomePage = async function () {
  await browser.wait(
    EC.visibilityOf(welcomeMessage), <-- give it a home page specific element
    10000
  )
}

await browser.waitForAngularEnabled(false); // <-- don't forget await here
await browser.driver.wait(EC.visibilityOf(this.getLoginForm()), 10000);
await this.usernameInput.sendKeys(username);
await this.passwordInput.sendKeys(password);
await this.clickLogInButton();

try {
  await waitForHomePage();
} catch (e) {
  await this.clickLogInButton();
  await waitForHomePage();
}

await browser.waitForAngularEnabled(true); // <-- don't forget await here

I'll wait maximum 10 sec, and if in 10 seconds the home page is still not present it will click and wait again