(uncaught exception)Error: ResizeObserver loop completed with undelivered notifications

Question

I am trying to get an element and use Cypress type command but getting this error: ResizeObserver loop completed with undelivered notifications. Here is my code:

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

I use below code in my support/e2e.js file but still getting the error.

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

Can somebody advise please why I am getting this error? Thanks a lot!

Answer 1

The uncaught exception handler looks ok, but it looks possible that the exception is not caused by the get #signature, it just occurs during that command.

Since uncaught exception is thrown asynchronously from the app under test, it can be coming from a previous command that has an action that changes the page. For example, it's possible the click handler of NextButton1 in causing it (or even something before that action).

To debug the problem, comment out your current handler.

Then add this code around the suspect line,

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

If should('have.been.called') fails, then it's not that line - move backwards in the test and check the previous line

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

and so on until you find the line that is failing.

ResizeObserver is often used to provide animation, so once you find the line that causes the error, add a visibility check to allow the page to settle before testing #signature.

Something like

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

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