英文:
(uncaught exception)Error: ResizeObserver loop completed with undelivered notifications
问题
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!
英文:
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!
答案1
得分: 2
以下是您要求的代码部分的中文翻译:
未捕获的异常处理程序看起来没问题,但可能是异常不是由 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') // 等待动画
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论