Wait for specific response in XHR polling with Cypress

Question

I have a cypress spec with which I want to test a function on my site which polls a third party API until it receives a correct answer and then shows more information for the user to continue with the function.

I start my spec with

cy.server();
cy.route('GET', '**/that-other-api/**').as('otherApi');

I know that this part works. The route is listed in the top of the Cypress test GUI, and my otherApi alias is attached to the XHR requests when they are listed in the command list when running.

When the user (or my test) clicks a button the site will start polling that endpoint. When I receive a status: success in the response, the user (or my test) is provided with a filled dropdown of options and can continue.

How can I get Cypress to wait until I get that specific response from the XHR request (or reaches a cypress timeout) and then continue onwards?

The Network request documentation doesn't explain if this is possible or not. I have tried

cy.wait('@billectaAccounts').should('have.property', 'response.body.status', 'success');

and just to see if stuff works

cy.wait('@billectaAccounts').should('have.property', 'status', 201);

which both throw an error:

InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').

Logging the response with

cy.wait('@billectaAccounts').then(console.log);

logs the response and shows that my status variable is there, but is pending since it's only on the first request.

{
  "xhr": {
    "method": "GET",
    "url": "https://myapi/longToken",
    "id": "xhr193"
  },
  "id": "xhr193",
  "url": "https://myapi/longToken",
  "method": "GET",
  "status": 200,
  "statusMessage": "200 (OK)",
  "request": {
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "body": null
  },
  "response": {
    "headers": {
      "cache-control": "max-age=0, private, must-revalidate",
      "connection": "close",
      "content-type": "application/json; charset=utf-8",
      "date": "Tue, 24 Mar 2020 08:32:09 GMT",
      "etag": "W/\"f0d6999f3be78c3dc8eab419745ec489\"",
      "referrer-policy": "strict-origin-when-cross-origin",
      "server": "Cowboy",
      "vary": "Origin",
      "via": "1.1 vegur",
      "x-content-type-options": "nosniff",
      "x-download-options": "noopen",
      "x-frame-options": "SAMEORIGIN",
      "x-permitted-cross-domain-policies": "none",
      "x-request-id": "id",
      "x-runtime": "0.006788",
      "x-xss-protection": "1; mode=block"
    },
    "body": {
      "id": 721,
      "public_id": "longTokenId",
      "bank": "bank-id",
      "ssn": "ssn-number",
      "status": "pending",
      "created_at": "2020-03-24T09:32:05.362+01:00",
      "updated_at": "2020-03-24T09:32:06.028+01:00",
      "account_numbers": [],
      "token": "pollingToken"
    }
  },
  "duration": 230
}

I would prefer to not stub the response, It's nice to have the end to end test to that API.

Any help appreciated!

Wait for specific response in XHR polling with Cypress

0 Answers