Cypress类名查询返回错误的类名？

Question

我现在正在做一个测试，检查某个dom元素（Front Panel）的类名是否在某个dom元素被点击后发生变化。我先抓取Front Panel的初始类名，然后点击必要的dom元素，再再次查询Front Panel的类名。 虽然我在浏览器中可以清楚地看到不同的类名，但Cypress再次返回Front Panel的初始类名。 我在这里遗漏了什么？

  it('Changes Panel Background Color', () => {
    cy.get('#Front_panel')
      .invoke('attr', 'class')
      .then(prevClassName => {
        cy.get('#color_picker')
          .children()
          .first()
          .children()
          .first()
          .children()
          .first()
          .children()
          .first()
          .children()
          .first()
          .click()

        cy.get('#Front_panel')
          .invoke('attr', 'class')
          .then(newClassName => {
            assert(prevClassName !== newClassName)
          })
      })
  })

顺便说一下，我知道这可能不是Cypress的最佳实践;)

Answer 1

我有一个测试可以很好地处理这种行为，在我的例子中，它是用来检查一个模态是否显示正常。试试这个东西。

  cy.log('has a info button');
  cy.get('.home-header-info-button').click();
  cy.get('.modal-header').should('contain', 'Health Details');
  cy.get('.modal-body-health-info-name').should('contain', 'Tony');
  cy.get('.modal-body-health-info-operator').should('contain', 'Doctor');
  cy.get('.modal-body-info').should('be.visible');
  cy.get('.modal-body-image').should('be.visible');
  cy.get('.modal-footer').should('be.visible');
  cy.get('.modal-header-close').click();
  cy.get('.modal-header').should('not.exist');

是一个更好的做法导航到你的类名， 因为将是更多的描述性和可读性 谁读这个测试在另一个时间。