Question

我用赛普拉斯编写了以下测试。我在前端使用带有SSR支持的VueJS。我的应用程序是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);
    });
});

根据赛普拉斯的最佳做法，我不应该以这种形式使用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配置文档

Answer 2

一年后，但也许这对有类似问题的人有用。

根据这篇非常有用的文章 - https://www.cypress.io/blog/2020/07/22/do-not-get-too-detached，要实现所需的等待，您应该允许应用程序在继续之前完成最先出现的操作。

我的猜测是，在您的情况下， .menuElement 仍未安装在 DOM 中。而不是使用wait()，你可以做这样的事情：

cy.get('.menuElement').should('not.exist');
cy.get('.menuElement').click();

赛普拉斯cy.wait的良好做法

2 个答案: