cy.wait 的赛普拉斯良好实践答案

【问题标题】：Cypress good practices with cy.waitcy.wait 的赛普拉斯良好实践
【发布时间】：2020-10-01 22:10:17
【问题描述】：

我有以下测试，用 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")的路由

但以上都不适合我。

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

【问题讨论】：

请说明究竟是什么失败了。渲染要检查的元素时是否涉及任何 Ajax 调用？
@viam0Zah 在点击后完全没有找到这个元素。只点击是不行的。它开始像以前一样工作cy.wait (1000);。
我会补充一点，页面渲染正确，所有菜单元素都是可见的。
当您观看测试运行程序时，您是否看到 Cypress 正在尝试获取 .menuElement 但随后超时？
完全正确：“AssertionError：重试超时：应找到元素...”

标签： javascript testing cypress browser-testing

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的评论。我了解给定元素的超时和期望问题，这里的问题更复杂。请注意，所有内容都已呈现，但仅单击不使用 cy.wait 是行不通的，我无法理解。为什么点击前等待会导致点击生效？
如果您愿意分享代码 sn-p，我可以帮助您找出问题所在并给出解决方案...查看您上面提到的代码，没有给出任何找出问题的想法。

【解决方案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();

【讨论】：