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

Question

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?

Answer 1

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;

You can read more here https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#check-if-an-element-exists

Answer 2

If both elements have same text and only this elements have this specific className then you can use nth() function

const msgHeadline = Selector('.myClassName')..withText(headlineText).nth(1);
await t
    .expect(msgHeadline.exists).ok(`Received less than ${count} desired messages with headline ${headlineText}`)

Here you take second element with headlineText and then assert, that it exists. Though i think you should check that it exists and displayed(visible)