第二个相同的断言在赛普拉斯中不起作用

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

This element is not visible because it has CSS property: display: none

The above line tells us that the element is not visible but it exists in the DOM. One way to assert is you can use exist instead of be.visible . It will validate that the element exists in HTML DOM.

cy.contains('Karteninventar').should('exist')

Or, If you have elements that are visible after scrolling you can use scrollTo() to go to that element and then use should(be.visible)

eg.

cy.scrollTo(0, 500)  //Scrolls down
cy.contains('Karteninventar').should('be.visible')

Or, If you want to directly assert the element with the property with display: none you can do something like:

cy.get('#dijit_MenuItem_3_accel')
    .should('have.attr', 'style', 'display: none')

Answer 2

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
      };
  });
})