javascript - Cypress 与 cy.wait 的良好实践

Question

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

before(() => {
   // mock data etc.
});

it('should check if component render properly without ssr', () => {
    cy.visit('url');
    cy.wait(1000);
    cy.get('.menuElement').click();
    cy.get('.something').should($something => {
        expect($something).to.have.length(10);
    });
});

根据 Cypress 的最佳实践，我不应该以这种形式使用 cy.wait。
但问题是；没有等待，测试将失败。我尝试使用:

{ timeout: 10000 }作为 cy.get 和 cy.visit 中的参数

添加了类似 .should('be.visible'); 的内容(等待何时可见)

添加路由 cy.wait("@abc")

但以上都不适合我。

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

Answer 1

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

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

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

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