避免在 Cypress 中使用 .wait() 来加载所有元素

Question

我一直在寻找解决我在赛普拉斯遇到的 .wait() 问题的方法。我们的应用程序不会同时加载所有数据。对于此类请求，最常见的答案如下：

cy.server();
cy.route('**/api/getData').as('getData');
cy.visit('/home');
cy.wait('@getData');

这根本行不通。您将到达 /customer/12345，但可能还需要几秒钟才能加载全部数据（甚至某些 UI 元素）。所以，检查路线根本没有帮助。我尝试创建别名，但是当我执行以下操作时：

cy.get('#submitButton').as('submit')

然后执行以下操作：

cy.wait('@submit')

由于该按钮尚不存在，因此别名检查失败。

我需要等到所有资源加载完毕才能开始测试元素。我团队中的一位对 Cypress 没有任何了解的开发人员询问我是否可以使用 Window load 事件或 GlobalEventHandler.onload，但我找不到任何有关在 Cypress 中使用这些事件的文档。

我希望所有回答者都能理解一件事，我是一个完全的新手。我有使用 Java、Selenium、Unirest 和 Junit 的经验。我必须彻底改变我对 Cypress 的心态，而且我不懂 Javascript，所以我仍处于学习阶段。在硒中我会

wait.until(ExpectedConditions.elementToBeClickable(By.id<submitButton>));

那么，有没有办法确保在开始运行测试之前加载全部资源？

Answer 1

我们最喜欢使用三种选项来避免隐式等待，因为在应用程序中添加延迟被认为是一种不好的做法，99% 的情况下我们不应该这样做。

选项1：

您可以使用以下should方法来避免显式等待命令

cy.get('put-locator-class/ID-here').should('be.visible).then(($el)=>{ $el.click()})

您需要确保您的元素一定会出现。

选项2：

自定义等待 -> 我们可以等待某些元素消失。这看起来更像是一种相反的方法。

例子：

cy.get(`span[title="${text}"][role="button"]`).click();
    while (cy.get('div[class="g3-single-select-filter"]').find('i[class="fas fa-spinner fa-pulse"]').length > 0){
        cy.wait(1000);
    }

选项3： 我们可以使用拦截命令等待API调用完成

cy.intercept('http://example.com/settings').as('getSettings')

// once a request to get settings responds, 'cy.wait' will resolve

cy.wait('@getSettings')

结束本次讨论，选项 1和选项 3在 cypress 社区中使用最广泛