Cypress does not recognize list element-CodePudding

I am trying to run Cypress tests for a Angular based Frontend. In this application there is a list-component that includes several message-list-items. The problem I'm currently facing is that Cypress does not recognize all message-list-items displayed.I want to compare the expected number of messages with the actual number of displayed messages. At the moment I do not understand Cypress's behavior. Sometimes Cypress recognizes all message-list-items and sometimes a single message is skipped (totally random which one). In the HTML the message-list-item exists and I can see the message-list-item beeing rendered too. Cypress just does not highlight or recognize it at all.

Here is a screenshot of the message-list-item in the HTML HTML message-list-items available

A screenshot from Cypress logs Cypress log output

The code to acess the message-list-items:

 cy.wait(2000).then(() =>
      cy.get('message-list')
        .each(($el, index) => {
          cy.wrap($el).then(() => (resultCounter  = 1));
        })
        .then(() =>
          expect(resultCounter).equals(
            expectedMessageCounter
          )
        )
    );

Anyone faced the same problem? Thanks in advance!

CodePudding user response：

The easiest way to do this without any flaky results is

cy.get('message-list-item')
  .should('have.length', expectedMessageCounter)

Because you have a .should(), Cypress will retry up to 4 seconds for the correct length.

You do not need to .each().