在没有 cy.wait() 的情况下解析 Cypress 中分离的 DOM 元素

Question

我收到以下代码的错误

describe('b-type test STEP 1', () => {
  beforeEach(() => {
    cy.visit('/contact/b-type')
  })
  it('Error message pop outs when clicking on the next button after not selecting a category', () => {
    cy.get('[data-cy=next]').click()
    cy.get('.bp3-toast-message').contains('Please select a category.').should('exist')
  })
})

我相信这是因为我的 DOM 元素在运行

之后立即分离

cy.visit('/contact/b-type')

在每次测试之前，赛普拉斯需要一些时间才能附加 DOM。

如果我在每个 click() 事件之前添加一个 cy.wait(1000)，错误就会解决。

describe('b-type test STEP 1', () => {
  beforeEach(() => {
    cy.visit('/contact/b-type')
  })
  it('Error message pop outs when clicking on the next button after not selecting a category', () => {
    cy.wait(1000)
    cy.get('[data-cy=next]').click()
    cy.wait(1000)
    cy.get('.bp3-toast-message').contains('Please select a category.').should('exist')
  })
})

但是，据我所知，以这种方式使用 cy.wait() 并不是最佳实践的一部分。有没有更好的方法在不使用 cy.wait() 的情况下解决页面访问后分离的 DOM 错误？

Answer 1

由于您是在 cy.visit() 之后立即对元素调用操作，因此最好在调用任何可操作命令之前附加一个 .should()。所以你所要做的就是：

describe('b-type test STEP 1', () => {
  beforeEach(() => {
    cy.visit('/contact/b-type')
  })
  it('Error message pop outs when clicking on the next button after not selecting a category', () => {
    cy.get('[data-cy=next]')
      .should('be.visible') // assert element is visible or retry previous command
      .click()
    cy.get('.bp3-toast-message')
      .contains('Please select a category.')
      .should('exist')
  })
})

在没有 cy.wait() 的情况下解析 Cypress 中分离的 DOM 元素

Resolving detached DOM element in Cypress without cy.wait()

cypress