javascript - The second same assertation doesn't work in Cypress

Question

I am writing a code that will check the names of the dropbox menus. With the first one it works fine, but for the others it shows me this error, even thought the dropbox is visible. I didn't change the code, so it's the same for all menus. This error appears:

AssertionError Timed out retrying after 5000ms: expected '' to be 'visible' This element is not visible because it has CSS property: display: none

My code:

 it('Check the dropdown menu Onboarding', function () {

    cy.visit('http://localhost:25000/', { timeout: 300000 })
    cy.wait(10000)
    cy.get('.dijitReset.dijitInline.dijitMenuItemLabel.dijitMenuItem:eq(1)').click() 
    cy.contains('Smartcard zuweisen').should('be.visible')
    cy.contains('Prim?re Smartcard zuweisen').should('be.visible')
    cy.contains('Prim?re Karte drucken und zuweisen').should('be.visible')
    cy.get('.dijitReset.dijitInline.dijitMenuItemLabel.dijitMenuItem:eq(1)').click() 
 
  })


it('Check the dropdown menu Kartenverwaltung', function () {
    //cy.visit('http://localhost:25000/', { timeout: 300000 })
    cy.wait(10000)
    cy.get('.dijitReset.dijitInline.dijitMenuItemLabel.dijitMenuItem:eq(2)').click()
    //cy.contains('Kartenverwaltung').should('be.visible')  
    cy.contains('Aktive und deaktivierte Karten')
    cy.contains('Karteninventar').should('be.visible')
    cy.contains('Personenübersicht').should('be.visible')
    cy.contains('Follow You Printing').should('be.visible')
    cy.contains('Staging-Tabelle').should('be.visible')
    cy.contains('Ausstehende Karten').should('be.visible')
    cy.contains('Gesperrte Karten').should('be.visible')
    cy.contains('Karte zurückgeben').should('be.visible')
    
})

The first function Onboarding works. From the second function Kartenverwaltung appears the error. What could be the problem?

First 3 tr and their children:

Update: In the dropdown that doesn't work with 'td' :

Error:

Answer 1

So here is my best guess at how to do this based on all the info given. I advise you to take a data-driven approach, which assumes all menus have the same pattern (which may not be true, I can't say for sure).

There are some gaps in the menu data that you will have to fill out from the app iteslf,

describe('Check the menus', () => {

  const menus = [
    {
      number: 1
      name: "Onboarding".
      items: [
        'Smartcard zuweisen', 
        'Prim?re Smartcard zuweisen',
        'Prim?re Karte drucken und zuweisen',
      ]
     },
     {
       number: 2
       name: "Kartenverwaltung".
       items: [
         'Aktive und deaktivierte Karten', 
         // other items here
       ]
     },
     // other menus here
  ];

  menus.forEach(menu => {

    it(`Check the dropdown menu ${menu.name}`, function () {
      cy.visit('http://localhost:25000/', { timeout: 300000 })
      cy.wait(10000)
      cy.get('.dijitReset.dijitInline.dijitMenuItemLabel.dijitMenuItem')
        .eq(menu.number).click();                                 // open menu
      cy.get(`table[title="${menu.name}"]`).should('be.visible'); // confirm opened
      menu.items.forEach(item => {
        cy.contains('td', item).should('be.visible');  // Confirm items
      };
  });
})