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

Question

我一直在寻找解决我在 Cypress 遇到的 .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 加载事件或 GlobalEventHandler.onload，但我找不到任何关于在 Cypress 中使用这些事件的文档。

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

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

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

Answer 1

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

选项 1:

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

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

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

选项 2:

Custom Wait -> 我们可以等待某些元素消失。这似乎更像是一种相反的方法。

示例:

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')

总结本次讨论，Option-1 和Option-3 在 cypress 社区中使用最广泛