Question 72630 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to wait for xhr 200 inCypress – Reactjs

I try to create an E2E Cypress test in my react project.
I need to wait until the POST request return 200.
I don’t need to do the call, because the button that i click() do it.
i have this in the console:

enter image description here

that’s fine, but arrive late, and before this the test continue running and show me the error:

enter image description here

I have this test in this moment:

describe("E2E CognitiveTool", function () {
  it("should crear respuesta simple sin problemas", function () {
    cy.visit("http://localhost:3000");
    cy.contains('[data-cy="topicName"]', 'CA2');
    cy.get('[data-cy="accederResponsesCA2"]').click();
    cy.get('[data-cy="crearResponse"]').should('exist')
      .click();
    cy.get('input[name="description"]')
      .type('Simple Cypres Response');
    cy.get('[name="typeResponse"]').first().check({ force: true });
    cy.get('[name="lateral_W"]').first().check({ force: true });
    cy.get('[name="rolViews"]').first().check({ force: true });
    cy.get('[name="workLoadLevel"]').first().check({ force: true });
    cy.get('[data-cy="continuar"]').click();
    cy.get('input[id=0]')
      .type('hola');
    cy.get('input[id=1]')
      .type('adios');
    cy.get('input[id=2]')
      .type('cypress');
    cy.get('input[id=3]')
      .type('jest');
    cy.get('input[id=4]')
      .type('testing');
    cy.get('input[id=5]')
      .type('automatico');
    cy.get('[data-cy="testing"]').should('exist')
      .click({ force: true });   /* here start the POST request and wait the 200 response, i would like to stop here until recieve the POST 200 */
    cy.window()
      .its('open')
      .should('exist')
      .get('[data-cy="continuar"]').click();
    cy.get('input[name="title"')
      .type('Titulo de respuesta simple');
    cy.get('input[name="text"')
      .type('TEXTO DE CYPRESS de respuesta simple');
    cy.get('[data-cy="saveandedit"]').should('exist')
      .click();


  });
});

How can i do this?
Some idea? thanks for your time.

Tags:

2

Answers


  1. 0

    You can use cy.wait() to wait for intercepted calls to complete before continuing. In this case, we’d want to set up the intercept before the call is triggered:

    cy.intercept('/api/v1/test-watson**').as('foo');

    Then, after triggering the call, we can use cy.wait().

    cy.get('[data-cy="testing"]')
  .should('exist')
  .click({ force: true })
  .wait('@foo'); // Use the alias assigned above, including @.

    If the request takes a significant amount of time, you can increase the amount of time that cy.wait() waits for the request.

    ...
.wait('@foo', { responseTimeout: 10000 }); // increases responseTimeout to 10s

    I wrote this answer assuming that you did not need the 200 response, but just to wait for the response from the API, as your question read as if your test continued before the response was received.

    Login or Signup to reply.
  2. 0

    You don’t have to explicitly wait for the XHR, just increase the timeout of the failing command.

    Don’t chain .get() off .should(), start a new chain. Include .should('be.visible') before clicking.

    cy.get('[data-cy="continuar"]', {timeout: 10000}).should('be.visible').click()
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search