Protractor syncing to an Angular page after redirection to Auth0 non-Angular page

Question

I have an Angular web app that uses Protractor for e2e tests. I recently added OAuth0 authentication. I disable Angular synchronisation before redirection to the non-Angul

Answer 1

Answer - yes you can reenable angular in protractor. However, protractor doesn't always work with angular apps. So just make sure protractors synchronization will be working as it should with your app AND the page is ready for this.

First, manually open the app, and get authorized. Then in console run getAllAngularTestabilities(). If this command in not available, protractor can't work with angular. If the command is successful, take a look at returned object, specifically at hasPendingMacrotasks and hasPendingMicrotasks properties of obj[0]._ngZone. If any of them is true, protractor can't work with this page. If both of them are false then you can proceed to the next step

Now, when you now the page can talk to protractor with browser.waitForAngularEnabled(true) you need to implement the following method for your tests

let login = async function (username, password) {
  await browser.waitForAngularEnabled(false);
  await browser.get(url);
  await $usernameInput.sendKeys(username);
  await $passwordInput.sendKeys(password);
  await $loginButton.click();
  // MOST IMPORTANTLY, YOU HAVE TO WAIT UNTIL YOUR APP FULLY LOADED
  await browser.wait(
    // whatever you need to wait for,
    timeout,
    'failure message'
  );
  // AND FINALLY
  await browser.waitForAngularEnabled(true);
}

I mean you don't have to have this method, I just showed you the order of actions you have to follow to achieve your results.

Basically, the point is, when you login, make sure the non-angular login page is gone, and your angular page is fully loaded before reenabling waiting for angular.

Two approaches you could use:

• wait for all key elements to be present
• or write a function which will be returning return !obj[0]._ngZone.hasPendingMacrotasks && !obj[0]._ngZone.hasPendingMicrotasks and pass it to the browser.wait