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

Question

我正在编写一个代码来检查下拉菜单的名称。 第一个它工作正常，但对于其他人它向我显示了这个错误，即使认为保管箱是可见的。 我没有更改代码，因此所有菜单都相同。 出现此错误：

AssertionError Timed out retrying after 5000ms: expected '' to be 'visible' 此元素不可见，因为它具有 CSS 属性：显示：无

我的代码：

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

第一个function 入职工作。 从第二个 function Kartenverwaltung出现错误。 可能是什么问题呢？

前 3 个 tr 和他们的孩子：

更新：在不适用于“td”的下拉列表中：

错误：

Answer 1

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

上面这行告诉我们该元素是不可见的，但它存在于 DOM 中。 断言的一种方法是您可以使用be.visible exist 它将验证该元素是否存在于 HTML DOM 中。

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

或者，如果您有滚动后可见的元素，您可以使用scrollTo()到 go 到该元素，然后使用should(be.visible)

例如。

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

或者，如果您想直接使用display: none属性断言元素，您可以执行以下操作：

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

Answer 2

所以这是我根据给出的所有信息对如何做到这一点的最佳猜测。 我建议您采用数据驱动的方法，假设所有菜单都具有相同的模式（这可能不是真的，我不能肯定地说）。

您必须从应用程序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
      };
  });
})