TestCafe gets stuck when using await async in expect assertion

Question

I'm using TestCafe and have the following code in the test which doesn't work:

test('Verify contents of allocation', async (t) => {
  await t
    .click(accountManager.selectAccount(inputData.testAccount))
    .click(homePage.icon)
    .expect(7)
    .eql(await dash.getPersonCount(inputData.totalAllocation));
});

The problem with the above code is that TestCafe says "Waiting for the element to appear" even before it hits the first line of the test and then gets stuck forever. I have no idea why this happens.

When I make the following change to the above test, then it works:

test('Verify contents of allocation', async (t) => {
  await t
    .click(accountManager.selectAccount(inputData.testAccount))
    .click(homePage.icon);
  const test = await dash.getPersonCount(inputData.totalAllocation);
  await t
    .expect(7)
    .eql(test);
});

Is there an easy way to prevent TestCafe from getting stuck?

And idea why it gets stuck in the first place?

Answer 1

The best practice is to put enumerated values in the actual field. When you use the Selector's DOM node state property or client function promise as an actual value in an assertion, TestCafe activates the smart assertion query mechanism. This mechanism makes your test stable - see more about it in the TestCafe documentation . So please rewrite your test the following way:

test('Verify contents of allocation', async (t) => {
  await t
    .click(accountManager.selectAccount(inputData.testAccount))
    .click(homePage.icon)
    .expect(dash.getPersonCount(inputData.totalAllocation)).eql(7);
});

The problem in your first example with the await keyword in the expect method relates to the execution of dash.getPersonCount(inputData.totalAllocation) before the test because this await breaks the test's chain.