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

【问题标题】：Cypress class name query returns wrong class name?Cypress 类名查询返回错误的类名？
【发布时间】：2020-09-05 21:15:51
【问题描述】：

我现在正在进行一项测试，检查单击某个 dom 元素后 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)
          })
      })
  })

顺便说一句，我知道这可能不是赛普拉斯的最佳实践；）

【问题讨论】：

标签： ui-automation cypress

【解决方案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');

导航到你的类名是更好的做法，因为对于下次阅读此测试的人来说，这将更具描述性和可读性。

【讨论】：