When trying to execute a browser.get method, block if there are pending async tasks

[cnishina]

  it('should perform an action on each element in an array', async() => {
    const colorList = element.all(by.model('color'));
    await browser.get('index.html#/form');

    colorList.each(async(colorElement) => {
      expect(await colorElement.getText()).not.toEqual('purple');
    });
  });

I forgot to put an await in front of the .each method. .each awaits a .map and executes a function.

proposed hack

The test passes which is weird. Probably because some of the expects are skipped? Anyway, it goes to the next it block and tries to do a browser.get call. We could maybe change a state property in browser to show that we are navigating. If there are any waitForAngular calls that happen during that time, we could bail on it or throw an error.

better solution for TypeScript

Probably the better advice is to provide more reasons to use TypeScript (documentation / guidance). If my tests were in TypeScript, a tslint could check if there were any async methods not being awaited for. I would have been able to find this error quickly and changed the code to:

  it('should perform an action on each element in an array', async() => {
    const colorList = element.all(by.model('color'));
    await browser.get('index.html#/form');

    await colorList.each(async(colorElement) => {
      expect(await colorElement.getText()).not.toEqual('purple');
    });
  });

[cnishina]

From conversation with Michael (in reference to runWaitForAngularScript found in browser.ts):

Turns out the error you get when that happens is UnhandledPromiseRejection , since the promise that started the waitForAngular isn't chained.
One thing we can do right away - add a process.on('unhandledRejection') that exits with an error message telling the user they have an unchained promise in their test.