Cypress 是一个现代化的端到端自动化测试框架，用于构建高质量的 Web 应用程序自动化测试。cy.wait() 是 Cypress 中常用的等待指令，它可以帮助我们暂停测试代码的执行，以便等待某个元素加载完成或者某个异步请求完成，提高测试的可靠性。然而，在实际应用中，我们可能会遇到 cy.wait() 莫名其妙地返回超时的问题，尤其是在复杂的应用程序测试中。在本文中，我们将探讨如何解决这个常见问题。
问题描述
在 Cypress 中使用 cy.wait() 可能会出现以下报错信息：
CypressError: Timed out retrying: cy.wait() timed out after 60000ms.
这个错误信息提示我们 cy.wait() 等待超时，即等待超过了默认的 60 秒。
这个问题可能会令你很不解，特别是当你不清楚具体的原因时。在下面的内容中，我们将探讨可能的原因和解决方案。
可能的原因
cy.wait() 超时的原因是多方面的，以下列举常见的原因：
网络请求等待超时
当 cy.wait() 用于等待网络请求完成时，可能会出现网络延迟等其他因素导致等待超时的情况。如果你的应用程序需要等待某些网络请求完成才能继续执行测试，你可以使用 cy.route() 对相应的请求进行拦截并进行处理。详情可参考 Cypress 官网文档。
页面元素等待超时
当 cy.wait() 用于等待页面元素加载完成时，可能会出现元素加载超时等问题。可能是由于元素本身没有被正常加载，或者由于元素可见性检查出错。你可以使用 cy.get() 对元素进行等待，直至元素出现。
Cypress 默认等待时间过短
Cypress 默认的等待时间为 4 秒，如果你的应用程序需要更长时间才能完成某些异步任务，那么执行 cy.wait() 可能会超时。在这种情况下，你可以使用 Cypress.config() 函数来修改等待时间，增加等待时间的长度。
解决方案
解决 cy.wait() 超时问题，我们可以采取以下措施：
使用 cy.route() 等待网络请求完成
如果你的应用程序需要等待完成某些网络请求，你可以使用 cy.route() 函数去拦截处理该请求，以确保请求完成后再继续执行测试。比如：
cy.server()
cy.route('GET', '/api/foo').as('getFoo')
cy.visit('/dashboard')
cy.wait('@getFoo')使用 cy.get() 等待页面元素加载完成
如果你的应用程序需要等待某些元素加载完成才能继续执行下一步，你可以使用 cy.get() 对该元素进行等待。比如：
cy.get('#myBtn').click()如果元素需要比较长的等待时间才能加载完成，请使用 cy.get() 函数的 timeout 选项进行配置。比如：
cy.get('#myBtn', { timeout: 10000 }).click()修改默认等待时间
如果你的应用程序需要等待时间更长，你可以通过 Cypress.config() 函数，修改默认的等待时间。比如：
Cypress.config('defaultCommandTimeout', 10000)总结
为了避免 cy.wait() 函数莫名其妙地返回超时问题，你需要对你的应用程序进行详细的调试，了解出现问题的原因。并根据具体情况，采取不同的解决方案。
Cypress 带来了现代化的自动化测试方式，强调可读性和可维护性，通过它可以轻松构建高质量的 Web 应用程序测试。在实际应用过程中，避免 cy.wait() 超时问题也是我们常常需要面对的问题。在测试脚本编写中，我们需要使用合适的等待策略，将测试脚本写得更健壮，以提高自动化测试的可靠性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cfd8c7d4982a6ebe7e1cf