Await in TestCafe

Question

I have been having some problems with understanding when/how await is used and required in TestCafé.

Why is does this function require an await on the first line?

async getGroupCount(groupName) {
  const groupFilterLinkText = await this.groupFilterLink.withText(groupName).textContent;
  const openInd = groupFilterLinkText.indexOf('(');
  const closeInd = groupFilterLinkText.indexOf(')');
  const count = parseInt(groupFilterLinkText.slice(openInd + 1, closeInd), 10);
  return count;
}

I later found in the doc that it says "Note that these methods and property getters are asynchronous, so use await to obtain an element's property." However, I'm using the function I wrote in a pretty synchronous way so this took me completely by surprise. I have ensured that the page is in the state that I want it to be in, and I just want to parse a string, but the test errors on line 2 of this function without the async / await .

Related to this, this is an example test case that calls that function:

test('Verify an account owner can create a single user', async (t) => {
  const userName = 'Single User';
  const userEmail = 'singleuser@wistia.com';
  const origUserCount = await usersPage.getGroupCount('All Users');

  await t
    .click(usersPage.addUserButton);

  await waitForReact();

  await t
    .typeText(usersPage.addUserModal.nameInput, userName)
    .typeText(usersPage.addUserModal.emailInput, userEmail)
    .expect(usersPage.addUserModal.saveButton.hasAttribute('disabled')).notOk()
    .click(usersPage.addUserModal.saveButton)
    .expect(usersPage.userCard.withText(userName).exists).ok({ timeout: 10000 });

  const newUserCount = await usersPage.getGroupCount('All Users');

  await t
    .expect(newUserCount).eql(origUserCount + 1);
});

Originally, I had the last few lines of the test looking like this:

await t
  ...
  .click(usersPage.addUserModal.saveButton)
  .expect(usersPage.userCard.withText(userName).exists).ok({ timeout: 10000 })
  .expect(await usersPage.getGroupCount('All Users')).eql(origUserCount + 1);

That is, it was included in one function chain for the entire test. This failed because the value of await usersPage.getGroupCount('All Users') was still returning the original value instead of getting updated. I don't understand why I need to separate that out into its own call to the function. Why is that getGroupCount being evaluated seemingly at the beginning of the test rather than when the test reaches that line of code? It doesn't seem to be behaving asynchronously in the way that I expected.

Answer 1

Looking at the documentations ( https://devexpress.github.io/testcafe/documentation/test-api/built-in-waiting-mechanisms.html ), it seems like you don't have to separate it out into it's own call but you'll have to shift the await to the beginning of the chain?

So for example, instead of:

<something>
  .click(usersPage.addUserModal.saveButton)
  .expect(usersPage.userCard.withText(userName).exists).ok({ timeout: 10000 })
  .expect(await usersPage.getGroupCount('All Users')).eql(origUserCount + 1);

You can do:

await <something>
  .click(usersPage.addUserModal.saveButton)
  .expect(usersPage.userCard.withText(userName).exists).ok({ timeout: 10000 })
  .expect(usersPage.getGroupCount('All Users')).eql(origUserCount + 1);