How to wait until angular execute in TestCafe?

Question

I want to wait for angular go to a stable state after some action in the app. I found that angular has window.getAllAngularTestabilities() and isStable function()

I tied to use it using TestCafe Client Function but this property is not recognized by TestCafe.

Do you have any idea how to deal with it?

Answer 1

I think you can check the https://github.com/DevExpress/testcafe-angular-selectors repository. It has built-in mechanisms for waiting the Angular

Answer 2

The ClientFunction code can be executed before all other scripts on the page. Likely, Angular doesn't have enough time to complete initialization in this case. Try to use the following code for your page:

const delay = ms => new Promise(r => setTimeout(r, ms));

const isAngularStable = ClientFunction(() => {
   if(!window.getAllAngularTestabilities)
       return false;
   
   return window.getAllAngularTestabilities().every(x => x.isStable());
});

const waitUntilAngularIsStable = async () => {
   while(!await isAngularStable())
       await delay(500); 
};

test('Test', async t => {
   await waitUntilAngularIsStable();
   // ...
});