Protractor - Angular Goes out of sync for feature modules

Question

I am trying to run angular e2e tests using protractor.

Here is my angular project looks like:

Angular Project

Main module
- HR module (Feature module)
- Register Module (Feature module)

For my e2e tests they are running fine if I try to execute tests on main module, but for the feature modules it goes out of sync.

The error I am receiving is - Angular is not defined. and some times element is not visible within specified timeout

Spec code:

describe('Page name', () => {

    it('should be able to load page', async () => {
      
        navigateToPage('hr/csvimport');
       
        browser.waitForAngular();
       
        const settingsName = generateRandomNumber();
       
        let btnAdd = element(by.id('btnAdd'));
        await btnAdd.click();
        //expect condition
   });
});

Navigate to page code:

export const navigateToPage = async (path) => {
    console.log('set location ' + path);
    if (path === '/' || path === '') {
        await browser.get('/');
    } else {
        await browser.waitForAngular().then(() => {
            browser.get('/' + path);
        });    
    }    
};

My best guess is that because of the feature module having different script loading it some how goes out of sync with angular. currently its frozen on click only and tests stops.

Question: how to make it sync with the angular?

score 1 · Accepted Answer · answered Mar 23 '21 at 15:08

1

lets start 1 by 1

navigateToPage and waitForAngular return promises. A promise needs to be resolved. So when you call them use await

Let me know what you're seeing

answered Mar 23 '21 at 15:08

Sergey Pleshakov

7,964
2
17
40

still same: `Async callback was not invoked within timeout specified`. I think something to do with the feature modules causing the issue? `defaultTimeoutInterval: 30000,` – Just code Mar 24 '21 at 13:31
are you sure you don't pass any argument to the second parameter of `it` block, like `done` in this example ` it('should be able to load page', async (done) => {` – Sergey Pleshakov Mar 24 '21 at 14:07
No Sergey, Even I am supprised by this behaviour – Just code Mar 24 '21 at 14:28
okay next step I'd do is find out if your page is protractor compatible. https://stackoverflow.com/questions/20927652/how-to-use-protractor-on-non-angularjs-website/66111219#66111219 – Sergey Pleshakov Mar 24 '21 at 14:33
If I try to check if angular enabled the it returns false and it is an angulaR application. After loading of lazy loaded route the page becomes non angular. If I try to navigate to other pages it works as expected. – Just code Mar 24 '21 at 15:24
I will test it once and get back to you – Just code Mar 25 '21 at 05:02
ok so `getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks getAllAngularTestabilities()[0]._ngZone.hasPendingMicrotasks` one of them returns true so I added `await browser.waitForAngularEnabled(false)` and tried to run button click worked. but `element(by.model('textbox'))` returns `angular is not defined`. any suggestion? – Just code Mar 25 '21 at 12:33
normally this indicates the page you're dealing with is not angular. But this is confusing to have so many questions in one, lets take it one at the time. We found one problem and solved. Please accept and upvote and we can move to another problem separately – Sergey Pleshakov Mar 25 '21 at 13:21
Sergey, No my real question is why it is going for out of sync when I load feature module. Please have a look at the question again. I thought you wanted to go step by step to check why it is going in non-angular state. – Just code Mar 25 '21 at 13:25

Protractor - Angular Goes out of sync for feature modules

1 Answers1