Protractor execution hangs when page is redirected

Question

I have a problem where protractor execution hangs when the page is redirected.

describe('describe something', () => {
  beforeAll(() => {
    helpers.login();
    page.elementThatNavigatesToAnotherPage.click();
  });

  afterAll(() => {
    helpers.logout();
  });

  it('should something', () => {
    expect(page.someElement.isPresent()).toBe(true);
  });
});

Whenever the page.elementThatNavigatesToAnotherPage.click() is in the beforeAll() , protractor execution will hang and timeout. If I remove it, the test will pass/fail and continue running other tests.

My login() function looks like this:

export function login(): void {
  const loginPage = new LoginPage();

  browser.get('#/login');

  browser.wait(until.presenceOf(elementOnLoginPage), TIMEOUT).then(() => {
    loginPage.submit('username', 'password');
    loginPage.optionButton.click();

    browser.wait(until.presenceOf(elementOnNextPage), TIMEOUT);
  });
}

Answer 1

You login function seems flawed. The Protractor functions wait , click and submit are all asynchronous. They return a promise. That means you must wait for the returned promise to resolve before you can continue your execution. Eg

loginPage.submit('username', 'password')
 .then(() => {
     loginPage.optionButton.click()
     .then(() => {
          browser.wait(until.presenceOf(elementOnNextPage), TIMEOUT);
      });
  });

Answer 2

As @Robert mentioned, you need to wait until your helpers.login() function returns a promise. Here is a snippet which I currently use

describe('Go to login page and then admin', () => {
    beforeAll(() => {
        navigateTo('login').then(()=> {
            <do something>
        });
        navigateTo('admin');
    });
});

navigateTo(path: string) {
    browser.waitForAngularEnabled(true);
    return browser.get(path).then(() => {
        browser.waitForAngularEnabled(false);
    });
}