4

我有以下测试，用 Cypress 编写。我在前端使用带有 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")

但以上都不适合我。

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

4

2 回答 2

1

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

根据这篇非常有用的文章 - 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();
于 2021-06-14T22:01:11.180 回答
0

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

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

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

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

于 2020-06-12T07:49:06.797 回答