Cypress 与 cy.wait 的良好实践

Question

我有以下测试，用 Cypress 编写。我在前端使用支持 SSR 的 VueJS。\n我的应用程序它\xe2\x80\x99s 是一个 SPA，我正在测试用户单击菜单。

\n\n

before(() => {\n   // mock data etc.\n});\n\nit(\'should check if component render properly without ssr\', () => {\n    cy.visit(\'url\');\n    cy.wait(1000);\n    cy.get(\'.menuElement\').click();\n    cy.get(\'.something\').should($something => {\n        expect($something).to.have.length(10);\n    });\n});\n

\n\n

根据 Cypress\xe2\x80\x99 最佳实践，我不应该以这种形式使用 cy.wait。\n但问题是；如果不等待，测试就会失败。我尝试使用：

\n\n

\n
• { timeout: 10000 }作为 cy.get 和 cy.visit 中的参数
\n
• 添加了类似的东西.should(\'be.visible\');（等待何时可见）
\n
• 添加了路线cy.wait("@abc")
\n

\n\n

但以上都不适合我。

\n\n

请提出一个解决方案。我应该怎么做才能使我的情况一切正常？

\n

Answer 1

除了使用 cy.wait() 显示代码之外，您没有显示不起作用的代码。您在文件中配置的 defaultTimeout 是多少cypress.json。您的页面加载需要多长时间...

默认情况下，Cypress 对于任何 cypress 命令都需要 4 秒，如果 DOM 上不存在元素或页面未加载，则会超时。所以你可以增加，pageLoadTimeout这样cypress将等待页面完全加载直到10秒，如果页面在2秒内加载，那么它将立即执行cy.get()命令

{
  "defalutTimeout": 5000,
  "pageLoadTimeout": 10000
}

注意：我曾经使用过很多 cy.wait() ，在我开始有效地使用超时之后，对我来说没有任何问题。请阅读cypress配置文档