Protractor wait for element on a non-angular page

Question

I am testing a page using protractor. Of the various test cases, I need to wait until the objects have loaded. The following are excerpts from the scripts. While this does not display any errors, it fails to wait for the object to appear and the test cases fail until the page is able to catch up.

login.e2e-spec.ts

  it('should display company logo', () => {
    page.navigateTo();
    page.clickImplicitGrantButton()
      .then(() => browser.wait(ExpectedConditions.visibilityOf(browser.getLogo()), 10000))
      .then(() => page.isLogoVisible()
      .then((isVisible) => {
        expect(isVisible).toBe(true);
    }));
  });

login.po.ts

clickImplicitGrantButton() {
    return $('button.mat-button#implicit').click();
  }

getLogo() {
    return browser.driver.findElement(by.className('main-logo'));
  }

isLogoVisible() {
    return this.getLogo().isDisplayed();
  }

you are using .findElement() which waits for angular to finish loading before searching for elements. You mentioned this is a non-angular page. Try using just .element() instead. — tehbeardedone
your script failed to wait which object appear? the main-logo or the ImplicitGrantButton. If it's the latter, you did not wait it appear in function clickImplicitGrantButton(). — yong

Thelnternet Thelnternet · Accepted Answer · 2018-03-28T18:44:22

Using @tehbeardedone 's suggestion of the use of .element(), I discovered the fix by adding one more line with the change. Here is the solution:

  it('should display company logo', () => {
    browser.ignoreSynchronization = true;
    page.navigateTo();
    page.clickImplicitGrantButton();
    browser.wait(ExpectedConditions.visibilityOf(browser.element(by.className('main-logo'))), 10000)
      .then(() => page.isLogoVisible()
      .then((isVisible) => {
            expect(isVisible).toBe(true);
    }));
  });

When I used the .element() command I kept getting the error:

- Failed: Error while waiting for Protractor to sync with the page: "window.angular is undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details"

Further investigation reveals that since the page is non-angular and thus cannot run synchronously with Protractor, you need to add into the test case:

    browser.ignoreSynchronization = true;

This will allow for the page to behave independently from the script and is necessary to utilize .wait() on a non-angular page.

Thanks for the input and I hope this is helpful to others trying to do the same thing in the future!

Protractor wait for element on a non-angular page

1 Answers