Protractor: wait for angular after page change (async / await)

user_6089515 0
Viewed 2585

I'm running protractor tests for my AngularJS application.

I'm facing the following problem - sometimes, after page was changed, protractor proceed without waiting angular to be initialized. Here is how I perform navigation.

beforeAll(async function() {
    await browser.get('#/page-url');
})

And time to time, first test in kit fails because it is trying to access some element on page, that does not exist yet, reporter shows me a blank page screenshot.

I tried the following solution from similar issue answer

beforeAll(async function() {
    await browser.waitForAngular();
    await browser.get('#/page-url');
})

But it does not work for me either. What I'm doing wrong? (AngularJS Version 1.7.2 / Protractor Version 5.4.0)

protractor angularjs javascript
3 Answers

This is how I would do it:

describe('your test spec description', async () => {    

    beforeAll( async ()  => {
        await browser.waitForAngular();
        await browser.get('#/page-url');
    });

    it('we can verify that ...', async () => {

        let importantElement = element(by.xxx(''));

        await browser.wait(
            ExpectedConditions.presenceOf(importantElement ),
            SHORT_TIMEOUT_MS, 'element is not present')

        //test code here, your element is ready 

    });
});
user_10790930

I'm not sure why you placed waittForAngular() before the page even opened, so this can be your problem, since there is nothing to wait for yet. Thus try this way

beforeAll( async ()  => {
    await browser.get('#/page-url');
    await browser.waitForAngular();
});

but sometimes it is not enough, and Hauns answer is applicable in this case. First of all you can wait for as many elements as you want, second, you may watch which element is being populated the last and wait for it or you can wait for the element you want to interact next (no need to wait for all elements).

user_91501460

With Protractor, you can use the following approach

var EC = protractor.ExpectedConditions;
// Wait for new page url to contain newPageName
browser.wait(EC.urlContains('newPageName'), 10000);
So your code will look something like,

emailEl.sendKeys('username');
passwordEl.sendKeys('pwd');

btnLoginEl.click();

var EC = protractor.ExpectedConditions;
// Wait for new page url to contain efg
ptor.wait(EC.urlContains('efg'), 10000);

expect(ptor.getCurrentUrl()).toEqual(url + 'abc#/efg');

Note: This may not mean that new page has finished loading and DOM is ready. The subsequent 'expect()' statement will ensure Protractor waits for DOM to be available for test.

Reference: Protractor ExpectedConditions

user_104285470
Related