时间戳

首页 > 解决方案 > Cypress 类名查询返回错误的类名？

ui-automation - Cypress 类名查询返回错误的类名？

问题描述

我现在正在进行一项测试，检查单击某个 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-automationcypress

解决方案

在我的情况下，我有一个测试可以很好地处理这种行为，用于检查模态显示是否正常。试试这个：

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

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

推荐阅读