（未捕获的异常）错误：ResizeObserver 循环已完成，但未传递通知

Question

我试图获取一个元素并使用 Cypress 类型命令，但收到此错误：ResizeObserver 循环已完成，但未传递通知。这是我的代码：

`get signatureBtn() {
        return cy.get('#signature').type('userName')
    }`

我在文件中使用以下代码support/e2e.js，但仍然收到错误。

    Cypress.on('uncaught:exception', (err, runnable) => {
    if (err.message.includes('ResizeObserver loop completed with undelivered notifications.')) {
        // ignore the error
        return false
    }
})

有人可以告诉我为什么我会收到此错误吗？多谢！

Answer 1

未捕获的异常处理程序看起来不错，但看起来异常可能不是由 引起的get #signature，它只是在该命令期间发生。

由于未捕获的异常是从被测应用程序异步抛出的，因此它可能来自具有更改页面操作的先前命令。例如，可能是点击处理程序NextButton1导致了它（或者甚至是该操作之前的某些操作）。

要调试问题，请注释掉当前的处理程序。

然后在可疑行周围添加此代码，

const stub = cy.stub()
Cypress.on('uncaught:exception', (err, runnable) => {
  if (err.message.includes('ResizeObserver')) {
      stub()
      return false
  }
})

cy.get('#signature').type('userName')

cy.wrap(stub).should('have.been.called') 

如果should('have.been.called')失败，则不是该行 - 在测试中向后移动并检查上一行

const stub = cy.stub()
Cypress.on('uncaught:exception', (err, runnable) => {
  if (err.message.includes('ResizeObserver')) {
      stub()
      return false
  }
})

cy.get('[data-test="NextButton"]').click()

cy.wrap(stub).should('have.been.called') 

依此类推，直到找到出现故障的线路。

ResizeObserver 通常用于提供动画，因此一旦找到导致错误的行，请在测试之前添加可见性检查以允许页面稳定下来#signature。

就像是

cy.get('[data-test="NextButton"]').click()

cy.get('some-element-that-appears-after-click')
  .should('be.visible')                          // wait for animation