Avoid using cy.wait() to wait for a page to load due to aborted get request cypress

Question

I'm running a cypress test that requires a page to load before clicking an element and logging in, but for some reason a failed (and aborted) GET request is causing the page to take forever to load and eventually it times out unless I add a cy.wait(6000) before the cy.click() call. I need to somehow wait for the page to load without using a cy.wait(). How can I do this, given that I cant fix the aborted GET request?

  cy.visit(loginUrl)
  cy.url().should('contain', '#/loginPortal')
  cy.wait(6000) //Allows page to load before trying to log in, needs to be removed
  cy.contains('ButtonText').click()

Answer 1

可以在断言之前让赛普拉斯等待任何特定的XHR调用。 responseTimeout configuration定义了等待的时间。

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

Cypress best practices: Unnecessary-Waiting.

Cypress docs on wait Alias.

Answer 2

告诉赛普拉斯在地址栏中等待特定URL出现然后再继续操作很有用。

cy.get('#login').click();
cy.location('pathname', {timeout: 20000}).should('include', '/path/to/page');

这可用于等待重定向，该重定向在登录或任何页面更改后触发。如Rui Marques所述，在使用cy.wait进行XHR请求之前，这可能是必要的第一步。