testing automated-tests e2e-testing testcafe web-testing

In Testcafe, how can I wait for a 2nd element of the same selector to appear?

I have a scenario in which multiple elements of the same className appear one after the other (it depends on a server response).

What I'm trying to achieve is passing the test only after 2 elements of the same selector are present, but currently, it seems like the test fails because it keeps recognizing 1 element and then straight up fails without waiting for a 2nd one.

This is my code (called from the outside with a count argument of, say, 2) -

import { Selector } from 'testcafe';

export const validateMsg = async (t, headlineText, count = 1) => {
  const msgHeadline = Selector('.myClassName').withText(headlineText).exists;

  const msgHeadLineExists = await t
    .expect(msgHeadline.count)
    .gte(count, `Received less than ${count} desired messages with headline ${headlineText}`);
  return msgHeadLineExists;
};

I assume this happens because I'm checking whether msgHeadline exists, and it sees the first element when it gets rendered, and immediately fails. I'd like to wait for a 2nd one.

Any ideas?

Solution

Just remove the .exists from your selector it returns boolean and then calling .count on it will fail the test.

const msgHeadline = Selector('.myClassName').withText(headlineText);

const msgHeadLineExists = await t
  .expect(msgHeadline.count)
  .gte(count, `Received less than ${count} desired messages with headline ${headlineText}`);
return msgHeadLineExists;